The jQuery Tooltip plugin replaces the original tooltip boxes and makes them customizable, you just need to adjust their content, position and appearance.
example
The jQuery tooltip plugin displays.
<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>