jQuery Tooltip 插件取代了原始的工具提示框,让它可以自定义,您只需要调整它们的内容、位置和外观即可。
实例
jQuery 工具提示插件显示。
<span style="color:#333333"><!doctype html>
<html>
<头>
<元字符集="utf-8">
<title>jQuery UI 工具提示 - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<脚本>
$(函数() {
$(文档).tooltip();
});
</脚本>
<样式>
标签 {
显示:内联块;
宽度:5em;
}
</样式>
</头>
<正文>
<p><a href="#" title="That's what this widget is">工具提示</a>可以附加到任何元素。当你悬停时
用鼠标点击元素,title 属性会显示在元素旁边的一个小框中,就像本机工具提示一样。</p>
<p>但由于它不是原生工具提示,因此可以设置样式。使用的任何主题
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller:jQuery UI 的主题生成器应用程序">ThemeRoller</a>
还将相应地设置工具提示的样式。</p>
<p>工具提示对于表单元素也很有用,可以在每个字段的上下文中显示一些附加信息。</p>
<p><label for="age">您的年龄:</label><input id="age" title="我们询问您的年龄仅用于统计目的。"></p>
<p>将鼠标悬停在该字段上以查看工具提示。</p>
</body>
</html></span>