仅CSS工具提示箭头-带背景、边框和；盒子阴影？ 工具提示CSS 我正在努力实现的目标

通过只使用一个元素，可以将工具提示样式设置为上面的链接中所示的样式，并使用工具提示箭头，该箭头也应用了相同的外观以显示为一个元素。我已经看到多个为箭头放置了另一个元素，但是我希望在不需要这样做的情况下实现这一点

问题 如何使工具提示箭头给人留下这样的印象：它是应用相同样式的工具提示的一部分

---

注意：如果您提供了代码，请您详细解释一下您所做的工作，以便我可以实现顶部提示和底部提示。

您可以使用一个伪元素，即

：：在

之前，将其旋转45度，并将其定位在距离底部大约一半高度的位置，使其看起来像一个箭头

a.has-tooltip{
位置：相对位置；
过渡：不透明度0.5s；
}
a、 具有工具提示范围{
位置：绝对位置；
左：20%；顶：50%；
转换：转换（0，-150%）；
背景：#333；
颜色：白色；
边界半径：10px；
盒影：2px2px6pxRGBA（0,0,0,0.5）；
填充：10px；
空白：nowrap；
不透明度：0；
过渡：不透明度0.2s；
边框：4px实心#999；
}
a、 有工具提示span:：before{
内容：''；
位置：绝对位置；
左侧：20%；顶部：计算（100%-10px）；
高度：20px；宽度：20px；
变换：旋转（45度）；
背景：继承；
盒影：2px2p4pRGBA（0,0,0,0.3）；
z指数：-1；
边界：继承；
边框宽度：0 4px 4px 0；
}
a、 有工具提示：悬停范围{
不透明度：1；
}

因此，您希望将任何背景应用于工具提示，箭头应具有相同的背景。我将您使用的样式替换为我自己的样式，但是在工具提示箭头上，您可以看到双框阴影。你知道我该怎么解决这个问题吗？看一看我最新的两个样本，没有一个是完美的，但和我一样接近could@LGSon悬停时，您的文本在工具提示上向下移动1-2px，看不出为什么会发生这种情况，否则，感谢您提供的额外帮助@不客气。我试了我所有的，没有移动任何文字。你使用哪种浏览器？谷歌浏览器，悬停时，当文本显示时，一秒钟或更短时间后，工具提示中的文本向下移动1-2倍

.has-tooltip .tooltip {
    position: absolute;
    left: 50%;
    top: -40px;
    opacity: 0;
    -webkit-transition: ease-out 300ms opacity;
       -moz-transition: ease-out 300ms opacity 0ms;
         -o-transition: ease-out 300ms opacity 0ms;
            transition: ease-out 300ms opacity 0ms;
    -webkit-transition-delay: 0ms;
    pointer-events: none;
    z-index: 9999;
}
.has-tooltip .tooltip span {
    position: relative;
    left: -50%;
    display: block;
    padding: 2px 8px;
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    background: rgba(45, 45, 45, 1);
    border: 1px solid rgba(204,204,204,0.60);
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    -webkit-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
       -moz-box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
            box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.50);
}