版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhanghui_hn/article/details/51695138
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 工具提示框（Tooltip） - 默认功能</title>
<link rel="stylesheet" href="http//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(document).ready(function () {
$(function () {
$(document).tooltip({
content: function () {
// 根据 $(this) 决定提示的内容
if ($(this).is("input")) {
// 提示纯HTML，可以自定义样式、内容等等
return "<div style='background-color: coral; width:100px; height: 100px'><h1>Hint Hint Hint</h1></div>"
}
}
});
});
});
</script>
</head>
<body>
<p><label for="age">您的年龄：</label>
<!--要为需要提示的元素添加title属性!-->
<input id="age" title="年龄仅用于统计。">
</p>
</body>
</html>