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

最新推荐文章于 2023-07-31 10:00:35 发布

在奋斗的大道

最新推荐文章于 2023-07-31 10:00:35 发布

阅读量888

点赞数

分类专栏： Jquery学习笔记

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18365737

版权

Jquery学习笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

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

 
<!doctype html>
 
<html lang="en">
 
<head>
 
    <meta charset="utf-8" />
 
    <title>jQuery UI Demos</title>
 
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
 
    <script src="scripts/jquery-1.9.1.js"></script>
 
    <script src="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><a href="#" 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
 
<a href="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><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
 
<p>Hover the field to see the tooltip.</p>
 
  
 
  
 
</body>
 
</html>

此外，可以通过CSS修改缺省Tooltip的显示风格，或是自定义Tooltip 显示内容（比如地图，图像等等），这里就不一一介绍了。

在奋斗的大道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入门教程(43): jQuery UI Tooltip 示例

JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为Toolbar显示，比如：12html lang="en">3head>4 meta charset="utf-8" />
复制链接

扫一扫

专栏目录