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 id="age" 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 id="age" 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 id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show" title="向下滑動顯示">show</a> 和

<a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide" title="爆炸隱藏">hide</a> 選項。</p>
<p>您也可以使用 <a id="open-event" 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 class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <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">
    <聖史蒂芬大教堂（St. Stephen&apos;s Cathedral）




表單


使用下麵的按鈕來顯示幫助文本，或者只需要讓滑鼠懸停在輸入框上或者讓輸入框獲得焦點，即可顯示相應輸入框的幫助文本。


在 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 id="firstname" name="firstname" title="請提供您的名字。">
    </div>
    <div>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" title="請提供您的姓氏。">
    </div>
    <div>
      <label for="address">地址</label>
      <input id="address" 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 id="age" 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 class="player">這裏是視頻 (HTML5?)</div>
<div class="tools">
  <span class="set">
    <button data-icon="ui-icon-circle-arrow-n" title="我喜歡這個視頻">喜歡</button>
    <button data-icon="ui-icon-circle-arrow-s">我不喜歡這個視頻</button>
  </span>
  <div class="set">
    <button data-icon="ui-icon-circle-plus" title="添加到播放列表">添加到</button>
    <button class="menu" data-icon="ui-icon-triangle-1-s">添加到收藏夾</button>
  </div>
  <button title="分享這個視頻">分享</button>
  <button data-icon="ui-icon-alert">標記為不恰當</button>
</div>


</body>
</html>