jquery - 如何使用 Bootstrap 构建自定义工具提示窗口？

Question

我正在尝试构建网站。我想要像 Established User On Stack Overflow. 这样的功能当网站访问者将鼠标悬停在回答问题的用户图片上时，应打开新窗口(可能是工具提示/弹出窗口 - 我不确定)，其中包含有关该用户的所有详细信息并离开新窗口(鼠标移出)它应该被隐藏起来。如何使用 Bootstrap 定制实现同样的目的？

谢谢。

Answer 1

在提问之前，你真的应该发布一些你试过的代码，但是，作为一个建议:

这可以通过 CSS 轻松实现。假设我们有两个元素:#wrapper 和#popup。

#wrapper 包含图像、#popup 元素并具有 position:relative。

#popup 是包含用户数据的元素，是隐藏的，具有 position:absolute 和 top:100%。您可以使用它来实现弹出窗口的不同位置。

要使#popup 可见，您可以在#wrapper 上设置CSS :hover 条件以显示弹出窗口，例如

#wrapper:hover #popup { display:block; }

这里有一个 fiddle 来展示这个概念:http://jsfiddle.net/8f68G/

希望这对您有所帮助。