Latest web development tutorials

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.horizo​​ntal )
            .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">
    <img src="../wp-content/uploads/2014/03/st-stephens.jpg" alt="聖史蒂芬大教堂（St. Stephen&apos;s Cathedral）" class="ui-corner-all">
  </a>
</div>
 
<div class="ui-widget photo">
  <div class="ui-widget-header ui-corner-all">
    <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）" class="ui-corner-all">
  </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 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>