Menu

30天學會 MooTools 教學(19): 工具提示 Tooltips

今天我們將來看一下MooTools綁定的Tooltip插件。通過「提示（Tips）」，你可以輕鬆地自定義一個包含一個標題和內容的工具提示， 可以自定義樣式，自定義淡入淡出漸變效果。我們還將仔細學習一下工具提示的選項和事件，還有一些用來從元素上添加和移除工具提示的工具。最後，我們將學習 一下怎麼讓一個頁面有多個不同樣式的工具提示。

 

基礎知識

創建一個新的工具提示

創建一個新的工具提示非常簡單。首先，我們來創建一個要添加工具提示的鏈接： 

<a class="tooltipA" title="1st Tooltip Title"  rel="here is the default 'text' of 1"  href="http://www.consideropen.com">Tool tip 1</a>

MooTools 1.2工具提示將默認顯示鏈接中的title和rel屬性的值。如果沒有rel屬性，將顯示href屬性值。

現在來創建一個新的默認工具條提示： 

var customTips = $$('.tooltipA');  
 var toolTips = new Tips(customTips);

由於沒有使用任何樣式，你將看到下面這樣的工具提示：

Tool tip 1

為你的工具提示使用樣式

MooTools可以讓你在很大程度上控制它的輸出——我們來看一下工具提示的html代碼： 

// 你可以在options中指定  
 // 工具提示容器的CSS類名  
 <div class="options.className">  
 <div class="tip"></div>


留意一下頂部和底部的div，你可以通過它們來輕鬆地在頂部和底部添加圓角，或者其他樣式效果。

現在，讓我們來創建一個我們的第一個選項並添加一些CSS。上面的html代碼將用名為「options.className」的CSS樣式來渲 染。通過給我們的工具提示來指定一個CSS類名，我們就可以給它一個獨立的樣式而不會影響頁面上的其他MooTools工具提示。 

var customTipsB = $$('.tooltipB');  
 var toolTipsB = new Tips(customTipsB, {  
      className: 'custom_tip'  
 });


最後，我們再添加一些CSS： 

.custom_tip .tip {  
      background-color: #333  
      padding: 5px  
 }  
 
 .custom_tip .tip-title {  
      color: #fff  
      background-color: #666  
      font-size: 20px  
      padding: 5px  
 }  
 
 .custom_tip .tip-text {  
      color: #fff  
      padding: 5px  
 }

 

選項

在Tips類中總共只有五個選項，每個都有很好的自解釋性（也就是一看就明白什麼意思了）。

showDelay

默認值為100

一個以毫秒為單位的整數，這將決定工具提示在鼠標移動到元素上面多久後再顯示出來。

hideDelay

默認值為100

和上面的showDelay一樣，不過這個值（也是以毫秒為單位）將決定當鼠標離開元素多久以後隱藏工具提示。

className

默認為null

就像你在上面的示例中看到的一樣，這可以讓你為工具提示容器設置一個CSS類名。

offsets

默認為 x:16, y:16

這將決定工具提示離你的元素的距離，x值為離元素往右的距離，y為離元素往下的距離（如果指定了fixed選項為false，將是相對於鼠標指針的距離，否則將是相對於元素的距離）。

fixed

默認為false

這個設置決定了當你的鼠標在元素上面移動時，這個工具提示是否跟隨鼠標。如果設置為true，工具提示將不隨鼠標指針的移動而移動，而只是停留在元素的附近固定的位置。

 

事件

和這個類的其他東西一樣，工具提示的事件仍然非常簡單。它有兩個事件：onShow和onHide，它們將會像你期待的那樣工作。

onShow

這個事件將在工具條顯示的時候觸發。如果你設置了延時，這個事件將在直到工具提示顯示出來時觸發。

onHide

和上面的onShow事件一樣，相對地，它是在工具提示隱藏時觸發。如果設置了延時，這個事件也將在直到工具提示隱藏起來時觸發。

 

方法

Tips類有兩個方法——attach和dettach，通過這兩個方法，你可以給一個指定的元素添加一個工具提示（當然了，這些工具提示會有相同的設置），或者從一個特定的元素上移除工具提示。

.attach();

要給一個新的元素添加一個工具提示，你只需要在Tip對象的後面加上.attach();，最後再把這個元素的選擇器放在括號裡面。 

toolTips.attach('#tooltipID3');

.dettach();

這個方法和.attach方法一樣，不過它們的行為完全相反。首先，寫下Tip對象，然後在這個元素的後面添加上.dettach()；，最後把這個元素的選擇器放在括號裡面。

參考代碼： 

toolTips.dettach('#tooltipID3');

代碼示例

在這個示例中，我們將創建兩個不同的Tip插件實例，這樣我們就可以有兩個不同樣式的工具提示。我們還將集成我們上面看到的選項、事件和方法。 

var customTips = $$('.tooltip');  
 
 var toolTips = new Tips(customTips, {  
      // 這將設置工具提示顯示的延遲時間  
      showDelay: 1000,     // 默認是100  
 
      // 這將設置工具提示隱藏的延遲事件  
      hideDelay: 100,    // 默認是100  
 
      // 這將給工具提示的容器div添加一個CSS樣式  
      // 這樣就可以在一個頁面上  
      // 有兩個不同樣式的工具條提示  
      className: 'anything', // 默認是null  
 
      // 這將設置x和y的偏移值  
      offsets: {  
          'x': 100,        // 默認是16  
          'y': 16         // 默認16  
      },  
 
      // 這將設置工具提示是否跟隨鼠標  
      // 設為true將不會跟隨鼠標  
       fixed: false,       // 默認是false  
 
      // 如果你在選項之外調用這個函數  
      // 並把這個函數留在這裡  
      // 它就閃一下，並有一個平滑的漸變效果  
      onShow: function(toolTipElement){  
          // 傳遞進來tooltip對象  
          // 你可以讓它們漸變到完全不透明  
          // 或者讓它們有一點點透明  
          toolTipElement.fade(.8);  
          $('show').highlight('#FFF504');  
      },  
      onHide: function(toolTipElement){  
          toolTipElement.fade(0);  
          $('hide').highlight('#FFF504');  
      }  
 });  
 
 var toolTipsTwo = new Tips('.tooltip2', {  
      className: 'something_else', // 默認是null  
 });  
 
 // 你可以用.store();方法來改變rel的值  
 // 從而改變工具提示的值  
 // 你可以使用下面的代碼  
 $('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.');  
 $('tooltipID1').store('tip:title', 'Here is a new title.');  
 
 // 下面的代碼將改不會改變工具提示的文本  
 $('tooltipID1').set('rel', 'This will not change the tooltips text');  
 $('tooltipID1').set('title', 'This will not change the tooltips title');  
 
 toolTips.detach('#tooltipID2');  
 toolTips.detach('#tooltipID4');


更多學習

通讀一遍MooTools文檔中的Tips這一節。另外，這裡還有David Walsh寫的一篇很不錯的關於定製Mootools Tips的文章。

遠程下載：下載一個包含你所需要的全部東西的zip壓縮包

 

Mootools 教學列表：