jQuery 入门教程(43): jQuery UI Tooltip 示例

最新推荐文章于 2025-06-03 09:12:16 发布

最新推荐文章于 2025-06-03 09:12:16 发布 · 198 阅读

文章标签：

#javascript #ui #ViewUI

本文介绍如何使用JQuery UI的Tooltip插件，包括基本配置、样式定制及应用场景示例等，帮助开发者快速掌握Tooltip的使用。

JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为Toolbar显示，比如：

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$(document).tooltip(); 
 
}); 
 
</script> 
 
<style> 
 
label { 
 
display: inline-block; 
 
width: 5em; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p><ahref="#"title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover 
 
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p> 
 
<p>But as it's not a native tooltip, it can be styled. Any themes built with 
 
<ahref="http://themeroller.com"title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> 
 
will also style tooltips accordingly.</p> 
 
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p> 
 
<p><labelfor="age">Your age:</label><inputid="age"title="We ask for your age only for statistical purposes."/></p> 
 
<p>Hover the field to see the tooltip.</p> 
 

 

 
</body> 
 
</html>