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

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

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

默认功能

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

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

自定义样式

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

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 工具提示框（Tooltip） - 自定义样式</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <script>
  $(function() {
    $( document ).tooltip({
      position: {
        my: \"center bottom-20\",
        at: \"center top\",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( \"<div>\" )
            .addClass( \"arrow\" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
      }
    });
  });
  </script>
  <style>
  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px \"Helvetica Neue\", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: \"\";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
  </style>
</head>
<body>
 
<p><a href=\"#\" title=\"部件的名称\">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
<p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href=\"http://themeroller.com\" title=\"ThemeRoller：jQuery UI 的主题创建应用程序\">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
<p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
<p><label for=\"age\">您的年龄：</label><input title=\"年龄仅用于统计。\"></p>
<p>悬停在相应的区域上查看工具提示框。</p>
 
 
</body>
</html>

自定义动画

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

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 工具提示框（Tooltip） - 自定义动画</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <script>
  $(function() {
    $( \"#show-option\" ).tooltip({
      show: {
        effect: \"slideDown\",
        delay: 250
      }
    });
    $( \"#hide-option\" ).tooltip({
      hide: {
        effect: \"explode\",
        delay: 250
      }
    });
    $( \"#open-event\" ).tooltip({
      show: null,
      position: {
        my: \"left top\",
        at: \"left bottom\"
      },
      open: function( event, ui ) {
        ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, \"fast\" );
      }
    });
  });
  </script>
</head>
<body>
 
<p>这里有多种方式自定义工具提示框的动画。</p>
<p>您可以使用 <a href=\"http://jqueryui.com/demos/tooltip/#option-show\" title=\"向下滑动显示\">show</a> 和
<a href=\"http://jqueryui.com/demos/tooltip/#option-hide\" title=\"爆炸隐藏\">hide</a> 选项。</p>
<p>您也可以使用 <a href=\"http://jqueryui.com/demos/tooltip/#event-open\" title=\"向下移动显示\">open</a> 事件。</p>
 
 
</body>
</html>

自定义内容

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

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

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 工具提示框（Tooltip） - 自定义内容</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <style>
  .photo {
    width: 300px;
    text-align: center;
  }
  .photo .ui-widget-header {
    margin: 1em 0;
  }
  .map {
    width: 350px;
    height: 350px;
  }
  .ui-tooltip {
    max-width: 350px;
  }
  </style>
  <script>
  $(function() {
    $( document ).tooltip({
      items: \"img, [data-geo], [title]\",
      content: function() {
        var element = $( this );
        if ( element.is( \"[data-geo]\" ) ) {
          var text = element.text();
          return \"<img class=\'map\' alt=\'\" + text +
            \"\' src=\'http://maps.google.com/maps/api/staticmap?\" +
            \"zoom=11&size=350x350&maptype=terrain&sensor=false&center=\" +
            text + \"\'>\";
        }
        if ( element.is( \"[title]\" ) ) {
          return element.attr( \"title\" );
        }
        if ( element.is( \"img\" ) ) {
          return element.attr( \"alt\" );
        }
      }
    });
  });
  </script>
</head>
<body>
 
<div>
  <div>
    <h2>圣史蒂芬大教堂（St. Stephen\'s Cathedral）</h2>
    <h3><a href=\"http://maps.google.com/maps?q=vienna,+austria&amp;z=11\" data-geo=\"\">奥地利维也纳（Vienna, Austria）</a></h3>
  </div>
  <a href=\"http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG\">
    <img src=\"/wp-content/uploads/2014/03/st-stephens.jpg\" alt=\"圣史蒂芬大教堂（St. Stephen&apos;s Cathedral）\">
  </a>
</div>
 
<div>
  <div>
    <h2>塔桥（Tower Bridge）</h2>
    <h3><a href=\"http://maps.google.com/maps?q=london,+england&amp;z=11\" data-geo=\"\">英国伦敦（London, England）</a></h3>
  </div>
  <a href=\"http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg\">
    <img src=\"/wp-content/uploads/2014/03/tower-bridge.jpg\" alt=\"塔桥（Tower Bridge）\">
  </a>
</div>
 
<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>
 
 
</body>
</html>

表单

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

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

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 工具提示框（Tooltip） - 表单</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <style>
  label {
    display: inline-block; width: 5em;
  }
  fieldset div {
    margin-bottom: 2em;
  }
  fieldset .help {
    display: inline-block;
  }
  .ui-tooltip {
    width: 210px;
  }
  </style>
  <script>
  $(function() {
    var tooltips = $( \"[title]\" ).tooltip();
    $( \"<button>\" )
      .text( \"Show help\" )
      .button()
      .click(function() {
        tooltips.tooltip( \"open\" );
      })
      .insertAfter( \"form\" );
  });
  </script>
</head>
<body>
 
<form>
  <fieldset>
    <div>
      <label for=\"firstname\">名字</label>
      <input name=\"firstname\" title=\"请提供您的名字。\">
    </div>
    <div>
      <label for=\"lastname\">姓氏</label>
      <input name=\"lastname\" title=\"请提供您的姓氏。\">
    </div>
    <div>
      <label for=\"address\">地址</label>
      <input name=\"address\" title=\"您的家庭或工作地址。\">
    </div>
  </fieldset>
</form>
 
 
</body>
</html>

跟踪鼠标

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

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 工具提示框（Tooltip） - 跟踪鼠标</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
  <script>
  $(function() {
    $( document ).tooltip({
      track: true
    });
  });
  </script>
</head>
<body>

<p><a href=\"#\" title=\"部件的名称\">Tooltips</a> 可被绑定到任意的元素上。当您的鼠标悬停在元素上时，title 属性会显示在元素旁边的一个小框中，就像原生的工具提示框一样。</p>
<p>但是由于它不是一个原生的工具提示框，所以它可以被定义样式。通过 <a href=\"http://themeroller.com\" title=\"ThemeRoller：jQuery UI 的主题创建应用程序\">ThemeRoller</a> 创建的主题也可以相应地定义工具提示框的样式。</p>
<p>工具提示框也可以用于表单元素，来显示每个区域中的一些额外的信息。</p>
<p><label for=\"age\">您的年龄：</label><input title=\"年龄仅用于统计。\"></p>
<p>悬停在相应的区域上查看工具提示框。</p>
 
 
</body>
</html>

视频播放器

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

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 工具提示框（Tooltip） - 视频播放器</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <style>
  .player {
    width: 500px;
    height: 300px;
    border: 2px groove gray;
    background: rgb(200, 200, 200);
    text-align: center;
    line-height: 300px;
  }
  .ui-tooltip {
    border: 1px solid white;
    background: rgba(20, 20, 20, 1);
    color: white;
  }
  .set {
    display: inline-block;
  }
  .notification {
    position: absolute;
    display: inline-block;
    font-size: 2em;
    padding: .5em;
    box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
  }
  </style>
  <script>
  $(function() {
    function notify( input ) {
      var msg = \"已选择 \" + $.trim( input.data( \"tooltip-title\" ) || input.text() );
      $( \"<div>\" )
        .appendTo( document.body )
        .text( msg )
        .addClass( \"notification ui-state-default ui-corner-bottom\" )
        .position({
          my: \"center top\",
          at: \"center top\",
          of: window
        })
        .show({
          effect: \"blind\"
        })
        .delay( 1000 )
        .hide({
          effect: \"blind\",
          duration: \"slow\"
        }, function() {
          $( this ).remove();
        });
    }
 
    $( \"button\" ).each(function() {
      var button = $( this ).button({
        icons: {
          primary: $( this ).data( \"icon\" )
        },
        text: !!$( this ).attr( \"title\" )
      });
      button.click(function() {
        notify( button );
      });
    });
    $( \".set\" ).buttonset({
      items: \"button\"
    });
 
    $( document ).tooltip({
      position: {
        my: \"center top\",
        at: \"center bottom+5\",
      },
      show: {
        duration: \"fast\"
      },
      hide: {
        effect: \"hide\"
      }
    });
  });
  </script>
</head>
<body>
 
<div>这里是视频 (HTML5?)</div>
<div>
  <span>
    <button data-icon=\"ui-icon-circle-arrow-n\" title=\"我喜欢这个视频\">喜欢</button>
    <button data-icon=\"ui-icon-circle-arrow-s\">我不喜欢这个视频</button>
  </span>
  <div>
    <button data-icon=\"ui-icon-circle-plus\" title=\"添加到播放列表\">添加到</button>
    <button data-icon=\"ui-icon-triangle-1-s\">添加到收藏夹</button>
  </div>
  <button title=\"分享这个视频\">分享</button>
  <button data-icon=\"ui-icon-alert\">标记为不恰当</button>
</div>
 
 
</body>
</html>