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

小虾米阅读：695 2021-04-01 09:57:25 评论：0

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 
      
       24 
        the 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> 
      
       27 
        will 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>

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

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。