首页 » jQuery UI » jQuery UI 实例
网站地图

工具提示框（Tooltip）

jQuery UI 实例 - 工具提示框（Tooltip）

可自定义的、可主题化的工具提示框，替代原生的工具提示框。

如需了解更多有关 tooltip 部件的细节，请查看 API 文档 工具提示框部件（Tooltip Widget）。

默认功能

悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 默认功能</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( document ).tooltip();
  13.   });
  14.   </script>
  15.   <style>
  16.   label {
  17.     display: inline-block;
  18.     width: 5em;
  19.   }
  20.   </style>
  21. </head>
  22. <body>
  23.  
  24. <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
  25. <p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
  26. <p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
  27. <p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p>
  28. <p>悬停在相应的区域上查看工具提示框。</p>
  29.  
  30.  
  31. </body>
  32. </html>

自定义样式

悬停在链接上，或者使用 tab 键循环切换聚焦在每个元素上。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 自定义样式</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( document ).tooltip({
  13.       position: {
  14.         my: "center bottom-20",
  15.         at: "center top",
  16.         using: function( position, feedback ) {
  17.           $( this ).css( position );
  18.           $( "<div>" )
  19.             .addClass( "arrow" )
  20.             .addClass( feedback.vertical )
  21.             .addClass( feedback.horizontal )
  22.             .appendTo( this );
  23.         }
  24.       }
  25.     });
  26.   });
  27.   </script>
  28.   <style>
  29.   .ui-tooltip, .arrow:after {
  30.     background: black;
  31.     border: 2px solid white;
  32.   }
  33.   .ui-tooltip {
  34.     padding: 10px 20px;
  35.     color: white;
  36.     border-radius: 20px;
  37.     font: bold 14px "Helvetica Neue", Sans-Serif;
  38.     text-transform: uppercase;
  39.     box-shadow: 0 0 7px black;
  40.   }
  41.   .arrow {
  42.     width: 70px;
  43.     height: 16px;
  44.     overflow: hidden;
  45.     position: absolute;
  46.     left: 50%;
  47.     margin-left: -35px;
  48.     bottom: -16px;
  49.   }
  50.   .arrow.top {
  51.     top: -16px;
  52.     bottom: auto;
  53.   }
  54.   .arrow.left {
  55.     left: 20%;
  56.   }
  57.   .arrow:after {
  58.     content: "";
  59.     position: absolute;
  60.     left: 20px;
  61.     top: -20px;
  62.     width: 25px;
  63.     height: 25px;
  64.     box-shadow: 6px 5px 9px -9px black;
  65.     -webkit-transform: rotate(45deg);
  66.     -moz-transform: rotate(45deg);
  67.     -ms-transform: rotate(45deg);
  68.     -o-transform: rotate(45deg);
  69.     tranform: rotate(45deg);
  70.   }
  71.   .arrow.top:after {
  72.     bottom: -20px;
  73.     top: auto;
  74.   }
  75.   </style>
  76. </head>
  77. <body>
  78.  
  79. <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
  80. <p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
  81. <p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
  82. <p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p>
  83. <p>悬停在相应的区域上查看工具提示框。</p>
  84.  
  85.  
  86. </body>
  87. </html>

自定义动画

本实例演示了如何使用 show 和 hide 选项来自定义动画，也可以使用 open 事件来自定义动画。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 自定义动画</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <script>
  11.   $(function() {
  12.     $( "#show-option" ).tooltip({
  13.       show: {
  14.         effect: "slideDown",
  15.         delay: 250
  16.       }
  17.     });
  18.     $( "#hide-option" ).tooltip({
  19.       hide: {
  20.         effect: "explode",
  21.         delay: 250
  22.       }
  23.     });
  24.     $( "#open-event" ).tooltip({
  25.       show: null,
  26.       position: {
  27.         my: "left top",
  28.         at: "left bottom"
  29.       },
  30.       open: function( event, ui ) {
  31.         ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  32.       }
  33.     });
  34.   });
  35.   </script>
  36. </head>
  37. <body>
  38.  
  39. <p>这里有多种方式自定义工具提示框的动画。</p>
  40. <p>您可以使用 <a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑动显示">show</a> 和
  41. <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隐藏">hide</a> 选项。</p>
  42. <p>您也可以使用 <a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open" title="向下移动显示">open</a> 事件。</p>
  43.  
  44.  
  45. </body>
  46. </html>

自定义内容

演示如何通过自定义 items 和 content 选项，来组合不同的事件委托工具提示框到一个单一的实例中。

您可能需要与地图工具提示框进行交互，这是未来版本中的一个待实现的功能。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   .photo {
  12.     width: 300px;
  13.     text-align: center;
  14.   }
  15.   .photo .ui-widget-header {
  16.     margin: 1em 0;
  17.   }
  18.   .map {
  19.     width: 350px;
  20.     height: 350px;
  21.   }
  22.   .ui-tooltip {
  23.     max-width: 350px;
  24.   }
  25.   </style>
  26.   <script>
  27.   $(function() {
  28.     $( document ).tooltip({
  29.       items: "img, [data-geo], [title]",
  30.       content: function() {
  31.         var element = $( this );
  32.         if ( element.is( "[data-geo]" ) ) {
  33.           var text = element.text();
  34.           return "<img class='map' alt='" + text +
  35.             "' src='http://maps.google.com/maps/api/staticmap?" +
  36.             "zoom=11&size=350x350&maptype=terrain&sensor=false&center=" +
  37.             text + "'>";
  38.         }
  39.         if ( element.is( "[title]" ) ) {
  40.           return element.attr( "title" );
  41.         }
  42.         if ( element.is( "img" ) ) {
  43.           return element.attr( "alt" );
  44.         }
  45.       }
  46.     });
  47.   });
  48.   </script>
  49. </head>
  50. <body>
  51.  
  52. <div class="ui-widget photo">
  53.   <div class="ui-widget-header ui-corner-all">
  54.     <h2>圣史蒂芬大教堂（St. Stephen's Cathedral）</h2>
  55.     <h3><a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo="">奥地利维也纳（Vienna, Austria）</a></h3>
  56.   </div>
  57.   <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
  58.     <img src="/wp-content/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen&apos;s Cathedral）" class="ui-corner-all">
  59.   </a>
  60. </div>
  61.  
  62. <div class="ui-widget photo">
  63.   <div class="ui-widget-header ui-corner-all">
  64.     <h2>塔桥（Tower Bridge）</h2>
  65.     <h3><a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo="">英国伦敦（London, England）</a></h3>
  66.   </div>
  67.   <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
  68.     <img src="/wp-content/uploads/2014/03/tower-bridge.jpg" alt="塔桥（Tower Bridge）" class="ui-corner-all">
  69.   </a>
  70. </div>
  71.  
  72. <p>所有的图片源自 <a href="http://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>，且归 <a href="http://creativecommons.org/licenses/by-sa/3.0/deed.en" title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版权持有人所有。</p>
  73.  
  74.  
  75. </body>
  76. </html>

表单

使用下面的按钮来显示帮助文本，或者只需要让鼠标悬停在输入框上或者让输入框获得焦点，即可显示相应输入框的帮助文本。

在 CSS 中定义一个固定的宽度，让同时显示所有的帮助文本时看起来更一致。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 表单</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   label {
  12.     display: inline-block; width: 5em;
  13.   }
  14.   fieldset div {
  15.     margin-bottom: 2em;
  16.   }
  17.   fieldset .help {
  18.     display: inline-block;
  19.   }
  20.   .ui-tooltip {
  21.     width: 210px;
  22.   }
  23.   </style>
  24.   <script>
  25.   $(function() {
  26.     var tooltips = $( "[title]" ).tooltip();
  27.     $( "<button>" )
  28.       .text( "Show help" )
  29.       .button()
  30.       .click(function() {
  31.         tooltips.tooltip( "open" );
  32.       })
  33.       .insertAfter( "form" );
  34.   });
  35.   </script>
  36. </head>
  37. <body>
  38.  
  39. <form>
  40.   <fieldset>
  41.     <div>
  42.       <label for="firstname">名字</label>
  43.       <input id="firstname" name="firstname" title="请提供您的名字。">
  44.     </div>
  45.     <div>
  46.       <label for="lastname">姓氏</label>
  47.       <input id="lastname" name="lastname" title="请提供您的姓氏。">
  48.     </div>
  49.     <div>
  50.       <label for="address">地址</label>
  51.       <input id="address" name="address" title="您的家庭或工作地址。">
  52.     </div>
  53.   </fieldset>
  54. </form>
  55.  
  56.  
  57. </body>
  58. </html>

跟踪鼠标

本实例中的工具提示框是相对于鼠标进行定位的，当鼠标在元素上移动时，它会跟随鼠标移动。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 跟踪鼠标</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   label {
  12.     display: inline-block;
  13.     width: 5em;
  14.   }
  15.   </style>
  16.   <script>
  17.   $(function() {
  18.     $( document ).tooltip({
  19.       track: true
  20.     });
  21.   });
  22.   </script>
  23. </head>
  24. <body>
  25.  
  26. <p><a href="#" title="部件的名称">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
  27. <p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href="http://themeroller.com" title="ThemeRoller：jQuery UI 的主题创建应用程序">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
  28. <p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
  29. <p><label for="age">您的年龄：</label><input id="age" title="年龄仅用于统计。"></p>
  30. <p>悬停在相应的区域上查看工具提示框。</p>
  31.  
  32.  
  33. </body>
  34. </html>

视频播放器

一个虚拟的视频播放器，带有喜欢/分享/统计按钮，每个按钮都带有自定义样式的工具提示框。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 工具提示框（Tooltip） - 视频播放器</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   .player {
  12.     width: 500px;
  13.     height: 300px;
  14.     border: 2px groove gray;
  15.     background: rgb(200, 200, 200);
  16.     text-align: center;
  17.     line-height: 300px;
  18.   }
  19.   .ui-tooltip {
  20.     border: 1px solid white;
  21.     background: rgba(20, 20, 20, 1);
  22.     color: white;
  23.   }
  24.   .set {
  25.     display: inline-block;
  26.   }
  27.   .notification {
  28.     position: absolute;
  29.     display: inline-block;
  30.     font-size: 2em;
  31.     padding: .5em;
  32.     box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
  33.   }
  34.   </style>
  35.   <script>
  36.   $(function() {
  37.     function notify( input ) {
  38.       var msg = "已选择 " + $.trim( input.data( "tooltip-title" ) || input.text() );
  39.       $( "<div>" )
  40.         .appendTo( document.body )
  41.         .text( msg )
  42.         .addClass( "notification ui-state-default ui-corner-bottom" )
  43.         .position({
  44.           my: "center top",
  45.           at: "center top",
  46.           of: window
  47.         })
  48.         .show({
  49.           effect: "blind"
  50.         })
  51.         .delay( 1000 )
  52.         .hide({
  53.           effect: "blind",
  54.           duration: "slow"
  55.         }, function() {
  56.           $( this ).remove();
  57.         });
  58.     }
  59.  
  60.     $( "button" ).each(function() {
  61.       var button = $( this ).button({
  62.         icons: {
  63.           primary: $( this ).data( "icon" )
  64.         },
  65.         text: !!$( this ).attr( "title" )
  66.       });
  67.       button.click(function() {
  68.         notify( button );
  69.       });
  70.     });
  71.     $( ".set" ).buttonset({
  72.       items: "button"
  73.     });
  74.  
  75.     $( document ).tooltip({
  76.       position: {
  77.         my: "center top",
  78.         at: "center bottom+5",
  79.       },
  80.       show: {
  81.         duration: "fast"
  82.       },
  83.       hide: {
  84.         effect: "hide"
  85.       }
  86.     });
  87.   });
  88.   </script>
  89. </head>
  90. <body>
  91.  
  92. <div class="player">这里是视频 (HTML5?)</div>
  93. <div class="tools">
  94.   <span class="set">
  95.     <button data-icon="ui-icon-circle-arrow-n" title="我喜欢这个视频">喜欢</button>
  96.     <button data-icon="ui-icon-circle-arrow-s">我不喜欢这个视频</button>
  97.   </span>
  98.   <div class="set">
  99.     <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button>
  100.     <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夹</button>
  101.   </div>
  102.   <button title="分享这个视频">分享</button>
  103.   <button data-icon="ui-icon-alert">标记为不恰当</button>
  104. </div>
  105.  
  106.  
  107. </body>
  108. </html>