如何在给定文本上添加信息性弹出窗口

时间:2012-11-22 20:56:07

标签: javascript html css

我有一些书籍标题的选项,我想添加鼠标悬停在它们每个上面一个带有一些有意义的书籍描述的弹出窗口。弹出窗口应出现在相应的书名之上并覆盖它。我不知道如何处理这个问题,也许jQuery可以提供帮助。我无法想象没有Javascript的解决方案,仅使用CSS。

HTML看起来像这样(必要时可以更改):

<tr><td>
<input type="radio" value="book1" name="download"> Book 1 <br>
<input type="radio" value="book2" name="download"> Book 2 <br>
<input type="radio" value="book2" name="download"> Book 3 <br>
</td></tr>

在第1册,第2册和第3册中,鼠标悬停时应出现信息弹出窗口(包括页数,摘要等内容)。

4 个答案:

答案 0 :(得分:2)

您可以调整使用数据属性内容的纯CSS方法作为工具提示内容:
http://www.impressivewebs.com/pure-css-tool-tips/

适用于IE8 +

答案 1 :(得分:1)

http://jquery.bassistance.de/tooltip/demo/可能是最快的实施方法

答案 2 :(得分:1)

有许多jQuery工具提示插件可以帮助您实现这一目标。要使插件正常工作,通常只需在HTML中添加“title”属性即可。

查看其中一些http://www.tripwiremagazine.com/2012/07/jquery-tooltip-plugin.html并选择符合您需要的UI。

答案 3 :(得分:1)

我建议你tipsy jquery pluginbootstrap也可以使用修改后的版本。