jQuery 自訂 tooltip- 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