jQuery 自訂 tooltip- tipsy

張貼者： 日期：
tipsy

雖然之前也有自己寫過一個自訂樣式的tooltip，可是還是覺得有外掛好多了，可以解決很多寫的時候沒有注意到的問題，這是一個小巧的plugin，很適合單純只要取代原本tooltip的使用者。

外掛網址
tipsy

首先參考他的html
view plaincopy to clipboardprint
  1. <a id="example-1" href="#" original-title="Hello World">Hover over me</a>  
主要是加一個自訂的attribute: original-title，這個是之後要顯示tooltip的內容，下載整包plugin後會有一個css，可以改成你要的樣式。

直接使用即可
view plaincopy to clipboardprint
  1. $('#example-1').tipsy();  

若要改變tooltip長出的位置，這個外掛也幫你考慮到
view plaincopy to clipboardprint
  1. $('#foo').tipsy({gravity: 'n'}); // nw | n | ne | w | e | sw | s | se  

其他設定可以參考文件
view plaincopy to clipboardprint
  1. $.fn.tipsy.defaults = {   
  2.     delayIn: 0,      // delay before showing tooltip (ms)   
  3.     delayOut: 0,     // delay before hiding tooltip (ms)   
  4.     fade: false,     // fade tooltips in/out?   
  5.     fallback: '',    // fallback text to use when no tooltip text   
  6.     gravity: 'n',    // gravity   
  7.     html: false,     // is tooltip content HTML?   
  8.     live: false,     // use live event support?   
  9.     offset: 0,       // pixel offset of tooltip from element   
  10.     opacity: 0.8,    // opacity of tooltip   
  11.     title: 'title',  // attribute/callback containing tooltip text   
  12.     trigger: 'hover' // how tooltip is triggered - hover | focus | manual   
  13. };  

Demo

想看更多類似plugin可以看這邊
20 Examples of jQuery Tooltip Plugins

留言

張貼留言