没有 jQuery 的纯 CSS 工具提示 [重复]

【问题标题】：Pure CSS tooltip without jQuery [duplicate]没有 jQuery 的纯 CSS 工具提示 [重复]
【发布时间】：2012-11-11 04:09:38
【问题描述】：

可能重复：
How can I create a “tooltip tail” using pure CSS?

我想创建一个 Facebook/Twitter 风格的工具提示（当您将鼠标悬停在人们的个人资料上时会出现他们个人资料的简短摘要）。我遇到了很多教程，但他们使用 jQuery。有没有办法做到这一点是 CSS 或者 javascript？

+我希望它也适用于图像。

谢谢

【问题讨论】：

@GeorgeStocker 不是重复的。 “工具提示”这个词是一个红鲱鱼，问题是关于用 CSS 创建三角形。
@stijn 最好的办法是根据它的实际要求对其进行编辑，而不会使答案无效。

标签： javascript html css

【解决方案1】：

你可以用纯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>

http://jsfiddle.net/AsKpv/

div 需要跟在 a 标签之后，“+”才能使用 CSS

如果你想让它变得时髦，你可以使用 opacity: 0 和 opacity:1 以及 css3 过渡来让它淡入。

祝你好运

【讨论】：

爱猫杰西！ ?