jQuery UI 實(shí)例 – 工具提示框（Tooltip）

2022-06-07 15:46 更新

jQuery UI 實(shí)例 - 工具提示框（Tooltip）

jQuery UI可自定義的、可主題化的工具提示框，替代原生的工具提示框。

如需了解更多有關(guān)tooltip部件的細(xì)節(jié)，請(qǐng)查看API文檔工具提示框部件（Tooltip Widget）。

默認(rèn)功能

懸停在鏈接上，或者使用tab鍵循環(huán)切換聚焦在每個(gè)元素上。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 默認(rèn)功能</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="部件的名稱">Tooltips</a> 可被綁定到任意的元素上。當(dāng)您的鼠標(biāo)懸停在元素上時(shí)，title 屬性會(huì)顯示在元素旁邊的一個(gè)小框中，就像原生的工具提示框一樣。</p>
<p>但是由于它不是一個(gè)原生的工具提示框，所以它可以被定義樣式。通過(guò) <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="ThemeRoller：jQuery UI 的主題創(chuàng)建應(yīng)用程序">ThemeRoller</a> 創(chuàng)建的主題也可以相應(yīng)地定義工具提示框的樣式。</p>
<p>工具提示框也可以用于表單元素，來(lái)顯示每個(gè)區(qū)域中的一些額外的信息。</p>
<p><label for="age">您的年齡：</label><input id="age" title="年齡僅用于統(tǒng)計(jì)。"></p>
<p>懸停在相應(yīng)的區(qū)域上查看工具提示框。</p>
 
 
</body>
</html>

自定義樣式

懸停在鏈接上，或者使用tab鍵循環(huán)切換聚焦在每個(gè)元素上。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 自定義樣式</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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> 可被綁定到任意的元素上。當(dāng)您的鼠標(biāo)懸停在元素上時(shí)，title 屬性會(huì)顯示在元素旁邊的一個(gè)小框中，就像原生的工具提示框一樣。</p>
<p>但是由于它不是一個(gè)原生的工具提示框，所以它可以被定義樣式。通過(guò) <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="ThemeRoller：jQuery UI 的主題創(chuàng)建應(yīng)用程序">ThemeRoller</a> 創(chuàng)建的主題也可以相應(yīng)地定義工具提示框的樣式。</p>
<p>工具提示框也可以用于表單元素，來(lái)顯示每個(gè)區(qū)域中的一些額外的信息。</p>
<p><label for="age">您的年齡：</label><input id="age" title="年齡僅用于統(tǒng)計(jì)。"></p>
<p>懸停在相應(yīng)的區(qū)域上查看工具提示框。</p>
 
 
</body>
</html>

自定義動(dòng)畫(huà)

本實(shí)例演示了如何使用show和hide選項(xiàng)來(lái)自定義動(dòng)畫(huà)，也可以使用open事件來(lái)自定義動(dòng)畫(huà)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 自定義動(dòng)畫(huà)</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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>這里有多種方式自定義工具提示框的動(dòng)畫(huà)。</p>
<p>您可以使用 <a id="show-option"  rel="external nofollow" target="_blank"  title="向下滑動(dòng)顯示">show</a> 和
<a id="hide-option"  rel="external nofollow" target="_blank"  title="爆炸隱藏">hide</a> 選項(xiàng)。</p>
<p>您也可以使用 <a id="open-event"  rel="external nofollow" target="_blank"  title="向下移動(dòng)顯示">open</a> 事件。</p>
 
 
</body>
</html>

自定義內(nèi)容

該示例演示如何通過(guò)自定義items和content選項(xiàng)，來(lái)組合不同的事件委托工具提示框到一個(gè)單一的實(shí)例中。

您可能需要與地圖工具提示框進(jìn)行交互，這是未來(lái)版本中的一個(gè)待實(shí)現(xiàn)的功能。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 自定義內(nèi)容</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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  rel="external nofollow" target="_blank"  data-geo="">奧地利維也納（Vienna, Austria）</a></h3>
  </div>
  <a  rel="external nofollow" target="_blank" >
    <img src="https://atts.w3cschool.cn/attachments/uploads/2014/03/st-stephens.jpg" alt="圣史蒂芬大教堂（St. Stephen'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  rel="external nofollow" target="_blank"  data-geo="">英國(guó)倫敦（London, England）</a></h3>
  </div>
  <a  rel="external nofollow" target="_blank" >
    <img src="https://atts.w3cschool.cn/attachments/uploads/2014/03/tower-bridge.jpg" alt="塔橋（Tower Bridge）" class="ui-corner-all">
  </a>
</div>
 
<p>所有的圖片源自 <a  rel="external nofollow" target="_blank" >Wikimedia Commons</a>，且歸 <a  rel="external nofollow" target="_blank"  title="Creative Commons Attribution-ShareAlike 3.0">CC BY-SA 3.0</a> 下版權(quán)持有人所有。</p>
 
 
</body>
</html>

表單

使用下面的按鈕來(lái)顯示幫助文本，或者只需要讓鼠標(biāo)懸停在輸入框上或者讓輸入框獲得焦點(diǎn)，即可顯示相應(yīng)輸入框的幫助文本。

在CSS中定義一個(gè)固定的寬度，讓同時(shí)顯示所有的幫助文本時(shí)看起來(lái)更一致。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 表單</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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="請(qǐng)?zhí)峁┠拿帧?>
    </div>
    <div>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" title="請(qǐng)?zhí)峁┠男帐稀?>
    </div>
    <div>
      <label for="address">地址</label>
      <input id="address" name="address" title="您的家庭或工作地址。">
    </div>
  </fieldset>
</form>
 
 
</body>
</html>

跟蹤鼠標(biāo)

本實(shí)例中的工具提示框是相對(duì)于鼠標(biāo)進(jìn)行定位的，當(dāng)鼠標(biāo)在元素上移動(dòng)時(shí)，它會(huì)跟隨鼠標(biāo)移動(dòng)。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 跟蹤鼠標(biāo)</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
  <script>
  $(function() {
    $( document ).tooltip({
      track: true
    });
  });
  </script>
</head>
<body>

<p><a href="#" title="部件的名稱">Tooltips</a> 可被綁定到任意的元素上。當(dāng)您的鼠標(biāo)懸停在元素上時(shí)，title 屬性會(huì)顯示在元素旁邊的一個(gè)小框中，就像原生的工具提示框一樣。</p>
<p>但是由于它不是一個(gè)原生的工具提示框，所以它可以被定義樣式。通過(guò) <a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="ThemeRoller：jQuery UI 的主題創(chuàng)建應(yīng)用程序">ThemeRoller</a> 創(chuàng)建的主題也可以相應(yīng)地定義工具提示框的樣式。</p>
<p>工具提示框也可以用于表單元素，來(lái)顯示每個(gè)區(qū)域中的一些額外的信息。</p>
<p><label for="age">您的年齡：</label><input id="age" title="年齡僅用于統(tǒng)計(jì)。"></p>
<p>懸停在相應(yīng)的區(qū)域上查看工具提示框。</p>
 
 
</body>
</html>

視頻播放器

一個(gè)虛擬的視頻播放器，帶有喜歡/分享/統(tǒng)計(jì)按鈕，每個(gè)按鈕都帶有自定義樣式的工具提示框。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 工具提示框（Tooltip） - 視頻播放器</title>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="http://code.jquery.com/jquery-1.9.1.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <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="我喜歡這個(gè)視頻">喜歡</button>
    <button data-icon="ui-icon-circle-arrow-s">我不喜歡這個(gè)視頻</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="分享這個(gè)視頻">分享</button>
  <button data-icon="ui-icon-alert">標(biāo)記為不恰當(dāng)</button>
</div>
 
 
</body>
</html>

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)