閱讀(4.1k) 書簽贊(0) 我要糾錯
jQuery Tooltip

2018-09-25 21:57 更新
jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，讓它們可自定義，您只需要調(diào)整它們的內(nèi)容、位置和外觀即可。
該插件目前版本是 1.3，已經(jīng)很長時間沒有更新，推薦使用 jQuery UI 工具提示框（Tooltip）。
訪問 jQuery Tooltip 官網(wǎng)，下載 jQuery Tooltip 插件。
如需了解更多有關(guān) jQuery UI 工具提示框（Tooltip）的細節(jié)，請查看 API 文檔 jQuery UI 工具提示框部件（Tooltip Widget）。
實例演示

jQuery Tooltip 插件演示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Tooltip 插件</title>

<link rel="stylesheet"  rel="external nofollow" target="_blank"  />
<link rel="stylesheet"  rel="external nofollow" target="_blank"  />
<script src="http://jquery.bassistance.de/tooltip/lib/jquery.js" rel="external nofollow"  type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/lib/jquery.bgiframe.js" rel="external nofollow"  type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/lib/jquery.dimensions.js" rel="external nofollow"  type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" rel="external nofollow"  type="text/javascript"></script>

<script src="http://jquery.bassistance.de/tooltip/demo/chili-1.7.pack.js" rel="external nofollow"  type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$('#set1 *').tooltip();

$("#foottip a").tooltip({
    bodyHandler: function() {
     return $($(this).attr("href")).html();
  },
    showURL: false
});

$('#tonus').tooltip({
    delay: 0,
 showURL: false,
   bodyHandler: function() {
     return $("<img/>").attr("src", this.src);
   }
});

$('#yahoo a').tooltip({
   track: true,
  delay: 0,
 showURL: false,
   showBody: " - ",
    fade: 250
});

$("select").tooltip({
 left: 25
});

$("map > area").tooltip({ positionLeft: true });

$("#fancy, #fancy2").tooltip({
    track: true,
  delay: 0,
 showURL: false,
   fixPNG: true,
 showBody: " - ",
    extraClass: "pretty fancy",
 top: -15,
 left: 5
});

$('#pretty').tooltip({
  track: true,
  delay: 0,
 showURL: false,
   showBody: " - ",
    extraClass: "pretty",
   fixPNG: true,
 left: -120
});

$('#right a').tooltip({
  track: true,
  delay: 0,
 showURL: false,
   extraClass: "right"
});
$('#right2 a').tooltip({ showURL: false, positionLeft: true });

$("#block").click($.tooltip.block);

});
</script>

</head>
<body>
<h1 id="banner">jQuery Tooltip 插件演示</h1>
<div id="main">
    <fieldset id="set1">
      <legend>三個帶有默認設(shè)置的 Tooltip 的元素</legend>
        <a title="一個帶有默認設(shè)置的 tooltip，href 顯示在標題下"  rel="external nofollow" target="_blank" >鏈接到谷歌</a>
        <br/>
       <label title="一個帶有 title 和默認設(shè)置的標簽，沒有 href" for="text1">請輸入一些字符！</label>
       <br/>
       <input title="請注意，當點擊 input 元素時，tooltip 消失" type="text" value="測試" name="action" id="text1"/>
     
      <h3>代碼</h3>
       <code class="mix">$('#set1 *').tooltip();</code>
  </fieldset>
 
  <fieldset id="foottip">
       <legend>使用 bodyHandler 來顯示 tooltip 中的腳注</legend>
      一些指向 <a href="#footnote">腳注</a> 的文本。
        <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <div id="footnote"><em>這里</em>是一個實際的腳注，通過嵌套的 <strong>HTML</strong> 來完成。</div>
       
      <h3>代碼</h3>
       <code class="mix">$("#foottip a").tooltip({
 bodyHandler: function() {
     return $($(this).attr("href")).html();
  },
    showURL: false
});</code>
  </fieldset>
 
  <fieldset>
      <legend>一個帶有 tooltip 的圖像</legend>
     <img id="tonus" src="http://jquery.bassistance.de/tooltip/demo/image.png" rel="external nofollow"  height="80" title="沒有延遲。src 值顯示在標題下" />
       <h3>代碼</h3>
   <code class="mix">$('#tonus').tooltip({
 delay: 0,
 showURL: false,
   bodyHandler: function() {
     return $("&lt;img/&gt;").attr("src", this.src);
   }
});</code>
   </fieldset>
 
  <fieldset>
      <legend>鎖定 tooltip</legend>
       <button id="block">點擊按鈕鎖定/解鎖所有的 tooltip</button>
        <h3>代碼</h3>
       <code class="mix">$("#block").click($.tooltip.block);</code>
  </fieldset>
 
  <fieldset>
      <legend>下面四個鏈接沒有延遲跟蹤和漸變，帶有額外的內(nèi)容</legend>
      <div id="yahoo">
          <a title="Yahoo doo - more content"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到雅虎</a>
         <a title="Yahoo doo2 - wohooo"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到雅虎 1</a>
            <a title="Yahoo doo3"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到雅虎 2</a>
         <a title="Yahoo doo4 - buga!"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到雅虎 3</a>
     </div>
      <select><option>bgiframe test</option></select>
       <h3>代碼</h3>
       <code class="mix">$('#yahoo a').tooltip({
   track: true,
  delay: 0,
 showURL: false,
   showBody: " - ",
    fade: 250
});</code>
   </fieldset>
 
  <fieldset>
      <legend>帶有額外的 class 的 tooltip。用于在一個頁面上顯示不同的 tooltip 樣式</legend>
       <em>請注意，當鼠標停留在右邊視區(qū)邊界時，右邊的那個 tooltip 如何顯示一個不同的背景圖片。</em>
       <br/>
       <span id="fancy" title="注意 - 請注意，這里帶有一些自定義的樣式。">一個奇特的 tooltip，帶有一些自定義的樣式。</span>
      <span id="fancy2" title="注意 - 請注意，這里帶有一些自定義的樣式。">一個奇特的 tooltip，帶有一些自定義的樣式。</span>
     <p><span id="pretty" title="注意 - 請注意，這里帶有更多自定義的樣式。">一個奇特的 tooltip，帶有陰影和一些額外的內(nèi)容。</span></p>
        <br/>
       <br/>
       <br/>
       <select><option>bgiframe test</option></select>
       <h3>代碼</h3>
       <code class="mix">$("#fancy, #fancy2").tooltip({
    track: true,
  delay: 0,
 showURL: false,
   opacity: 1,
   fixPNG: true,
 showBody: " - ",
    extraClass: "pretty fancy",
 top: -15,
 left: 5
});

$('#pretty').tooltip({
  track: true,
  delay: 0,
 showURL: false,
   showBody: " - ",
    extraClass: "pretty",
   fixPNG: true,
 opacity: 0.95,
    left: -120
});</code>
  </fieldset>
 
  <fieldset>
      <legend>下拉框</legend>
      <select title="帶有 tooltip 的 select">
          <option>1. option</option>
            <option>2. option</option>
            <option>3. option</option>
        </select>
   </fieldset>
 
  <fieldset>
      <legend>帶有 tooltip 的圖像地圖</legend>
 
      <img id="map" src="karte.png" width="345" height="312" border="0" usemap="#Landkarte">
      <map name="Landkarte">
          <area shape="rect" coords="11,10,59,29"                 rel="external nofollow" target="_blank"  alt="Koblenz" title="Koblenz">
       <area shape="rect" coords="42,36,96,57"                 rel="external nofollow" target="_blank"  alt="Wiesbaden" title="Wiesbaden">
         <area shape="rect" coords="42,59,78,80"                 rel="external nofollow" target="_blank"  alt="Mainz" title="Mainz">
         <area shape="rect" coords="100,26,152,58"               rel="external nofollow" target="_blank"  alt="Frankfurt" title="Frankfurt">
         <area shape="rect" coords="27,113,93,134"               rel="external nofollow" target="_blank"  alt="Mannheim" title="Mannheim">
        <area shape="rect" coords="100,138,163,159"                 rel="external nofollow" target="_blank"  alt="Heidelberg" title="Heidelberg">
          <area shape="rect" coords="207,77,266,101"                  rel="external nofollow" target="_blank"  alt="W&uuml;rzburg" title="W&uuml;rzburg">
         <area shape="rect" coords="282,62,344,85"               rel="external nofollow" target="_blank"  alt="Bamberg" title="Bamberg">
       <area shape="rect" coords="255,132,316,150"                 rel="external nofollow" target="_blank"  alt="N&uuml;rnberg" title="N&uuml;rnberg">
         <area shape="rect" coords="78,182,132,200"                  rel="external nofollow" target="_blank"  alt="Karlsruhe" title="Karlsruhe">
         <area shape="rect" coords="142,169,200,193"                 rel="external nofollow" target="_blank"  alt="Heilbronn" title="Heilbronn">
         <area shape="rect" coords="140,209,198,230"                 rel="external nofollow" target="_blank"  alt="Stuttgart" title="Stuttgart">
         <area shape="rect" coords="187,263,222,281"                 rel="external nofollow" target="_blank"  alt="Ulm" title="Ulm">
       <area shape="rect" coords="249,278,304,297"                 rel="external nofollow" target="_blank"  alt="Augsburg" title="Augsburg">
        <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"               rel="external nofollow" target="_blank"  alt="Baden" title="Baden">
       </map>
      <h3>代碼</h3>
       <code class="mix">$("map *").tooltip({ positionLeft: true });</code>
  </fieldset>
 
  <fieldset>
      <legend>在視區(qū)的邊界測試重新定位</legend>
     <p id="right">
            帶有固定寬度的 tooltip<br/>
            <a title="短標題" href="http://google" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到谷歌</a><br/>
          <a title="長標題，沒有其他含義，只是一個長標題，一個很長很長很長很長很長的標題" href="http://google" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到谷歌</a>
      </p>
        <p id="right2">
           帶有自動寬度的 tooltip<br/>
            <a title="短標題" href="http://google" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到谷歌</a><br/>
          <a title="長標題，沒有其他含義，只是一個長標題，一個很長很長很長很長很長的標題" href="http://google" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >鏈接到谷歌</a>
      </p>
        <h3>代碼</h3>
       <code class="mix">$('#right a').tooltip({
   track: true,
  delay: 0,
 showURL: false,
   extraClass: "right"
});
$('#right2 a').tooltip({ showURL: false, positionLeft: true });</code>
    </fieldset>
</div>

</body>
</html>
以上內(nèi)容是否對您有幫助：
寫筆記
我要補充
jQuery Tooltip

jQuery Tooltip

實例演示

推薦文章

推薦教程

推薦課程
