Html 仅CSS工具提示

我尝试了CSS唯一的工具提示。但是，我无法向工具提示的箭头添加边框

这是我的代码（请参阅）：

---

仅当鼠标悬停在elment上时，才需要显示

：before

和

：after

所以

变成

.tooltip:hover:after

。工具提示{
显示：内联；
位置：相对位置；
}
。工具提示：悬停{
颜色：#000；
文字装饰：无；
}
。工具提示：悬停：在{
背景:#ffffe1；
边界半径：4px；
边框：1px实心#DCA；
盒影：5px 5px 8px#ccc；
底部：28px；
颜色：#000；
内容：attr（title）；
显示：块；
左：1米；
填充：9px 8px 9px 8px；
位置：绝对位置；
z指数：98；
最小宽度：200px；
最大宽度：500px；
字体：12px Arial，Helvetica，无衬线；
线高：16px；
}
。工具提示：悬停：在{
边框：实心；
边框颜色：rgba（255、255、225、1）透明；
边框宽度：15px 15px 0px 0px；
底部：1米；
内容：“；
显示：块；
左：2米；
位置：绝对位置；
z指数：99；
}

工具提示

为工具提示添加一个

span

，以便更好地设置样式

。工具提示{
显示：内联；
位置：相对位置；
}
。工具提示：悬停{
颜色：#000；
文字装饰：无；
}
.工具提示范围{
背景:#ffffe1；
边界半径：4px；
边框：1px实心#DCA；
盒影：5px 5px 8px#ccc；
底部：28px；
颜色：#000；
内容：attr（title）；
显示：块；
左：1米；
填充：9px 8px 9px 8px；
位置：绝对位置；
z指数：98；
最小宽度：200px；
最大宽度：500px；
字体：12px Arial，Helvetica，无衬线；
线高：16px；
显示：无；
}
.工具提示范围：之前{
边框：实心；
边框颜色：rgba（255、255、225、1）透明；
边框宽度：14px 14px 0px 0px；
底部：-14px；
内容：“；
显示：块；
左：2米；
位置：绝对位置；
z指数：1；
}
.工具提示范围：在{
边框：实心；
边框颜色：#DCA透明；
边框宽度：17px 17px 0px 0px；
内容：“；
显示：块；
左：23px；
底部：-17px；
位置：绝对位置；
z指数：-1；
}
.工具提示：悬停范围{
显示：块；
}

将鼠标悬停在屏幕上以显示工具提示

下次，请在问题中包含相关代码，而不仅仅是在JSFIDLE中。这是被阻止的原因。此外，您还可以包括可运行的代码片段，就像问题本身中的JSFIDLE一样。当然，“我需要一个即时解决方案。”对于这样一个自由自愿的社区来说，这从来都不是一个好的论据。很抱歉，要求立即解决这个问题。原谅我，是的。在底部箭头中，我需要一个边框。啊，我不清楚。你不能那样做。一种解决方案是添加一个长方体阴影，但这不符合对角线边界轮廓。因此，唯一的解决方案是一个额外的元素或伪元素。由于您已经使用了这两个伪元素，所以在html标记中需要一个额外的元素。例如，这可能是连接线内外的额外跨度。在该范围内，您可以创建一个额外的三角形，该三角形具有轮廓的边框颜色，并且略大于现在的黄色箭头。

.tooltip:after

.tooltip:hover:after