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

最新推荐文章于 2020-06-16 16:31:39 发布

引路蜂

最新推荐文章于 2020-06-16 16:31:39 发布

阅读量4.4k

点赞数 1

分类专栏：教程 jQuery JavaScript jQuery教程

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

jQuery

48 篇文章

订阅专栏

本文介绍如何使用JQuery UI的Tooltip插件，包括基本用法、样式调整及自定义内容等，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

 
    1<!doctype html>
 
    2<html lang="en">
 
    3<head>
 
    4    <meta charset="utf-8" />
 
    5    <title>jQuery UI Demos</title>
 
    6    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    7    <script src="scripts/jquery-1.9.1.js"></script>
 
    8    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>
 
    9    <script>
 
    10        $(function () {
 
    11            $(document).tooltip();
 
    12        });
 
    13  </script>
 
    14  <style>
 
    15  label {
 
    16    display: inline-block;
 
    17    width: 5em;
 
    18  }
 
    19  </style>
 
    20</head>
 
    21<body>
 
    22  
 
    23<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
 
    24the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
 
    25<p>But as it's not a native tooltip, it can be styled. Any themes built with
 
    26<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
 
    27will also style tooltips accordingly.</p>
 
    28<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
 
    29<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
 
    30<p>Hover the field to see the tooltip.</p>
 
    31  
 
    32  
 
    33</body>
 
    34</html>