可能重复:
如何使用纯CSS创建“工具提示尾巴”？
我想创建一个Facebook / Twitter样式的工具提示（当你悬停在人们的个人资料上时，会显示其个人资料的简短摘要）。我找到了许多教程，但它们使用jQuery。是否有一种方式可以使用CSS和JavaScript来实现这一点？
+我希望这也适用于图片。
谢谢
+我希望这也适用于图片。
谢谢
没有jQuery的纯CSS工具提示
5
- Jaspreet
2
1@GeorgeStocker 不是重复问题。单词“tooltip”是一个误导，这个问题是关于如何使用CSS创建三角形的。 - user247702
@stijn 最好的方法是根据问题的实际要求进行编辑，而不会使答案失效。 - George Stocker
1个回答
9
你可以使用纯CSS实现这一功能。
你可以使用hover伪类来触发它。
以下是一个可供参考的概念，应该能让你开始实现：
div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }
<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>
需要 a标签 的跟随才能使用CSS中的'+'。
如果你想让它更加华丽，可以使用opacity: 0和opacity:1以及CSS3过渡来实现淡入效果。
祝好运！
- Jesse
1
喜欢杰西这只猫！ - Abramodj
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接