纯CSS实现黑色气泡tooltip效果实例页面

zxx: 鼠标经过上面按钮体验效果

CSS代码：

.button-mention {
    display: inline-flex;
    padding: 2px 8px;
    font-size: 100%;
    border: 0;
    border-radius: 99px;
    background-color: #ffffff26;
    cursor: pointer;
    opacity: .75;
    interest-delay-start: .2s;
    color: #fff;
}
.mention-tooltip {
    --tooltip-shape: shape( from 5% 0%, hline to 95%, arc to 100% 21.05% of 5% 21.05% small cw, vline to 57.89%, arc to 95% 78.95% of 5% 21.05% small cw, hline to 55%, line to 50% 100%, line to 45% 78.95%, hline to 5%, arc to 0% 57.89% of 5% 21.05% small cw, vline to 21.05%, arc to 5% 0% of 5% 21.05% small cw, close );
    position: fixed;
    position-area: top;
    width: max-content;
    margin: 0 0 2px;
    padding: 2px 8px 8px;
    border: 0;
    aspect-ratio: 4.211;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    clip-path: var(--tooltip-shape);
    line-height: 2;
    &:interest-target {
        animation: tinydown 0.2s ease-in-out;
    }
}
@supports (border-shape: none) {
    .mention-tooltip {
        clip-path: none;
        border: 1px solid #fff1;
        border-shape: var(--tooltip-shape);
    }
}

@keyframes tinydown {
    from {
        transform: translateY(-5px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

HTML代码：

<button class="button-mention" interestfor="tooltip">黑夜模式封面图</button>

<div id="tooltip" class="mention-tooltip" popover="hint">点击 或 按Tab键插入</div>