好用的 jQuery 提示對話框 plugin- qTip2

plugin 網址
qTip2

雖然html只要加了title，滑鼠移過去後就會有提示功能，可是因為長相太普通了，所以如果可以自訂對話框就會漂亮很多，這個plugin就是為了滿足這個需求而出現的，而且還滿強大的。

基本用法很簡單，引入plugin跟css後。

view plaincopy to clipboardprint

1. $('.selecter').qtip({   
2.         content: 'I\'m positioned using corner values!',   
3.         position: {   
4.             my: 'top left',  // Position my top left...   
5.             at: 'bottom right', // at the bottom right of...   
6.         }   
7.     });  

my指的是對話框尖角的位置，at則是出現在selector的相對位置，各個角落都可以，可以參考下面這張圖指定位置。

Demo

可以參考 Plugin 的 Demo 頁，更神奇的是他還可以跟其他的 plugin 整合。

像試著跟Validation這個plugin整合。

基本的綁法都一樣，綁完原本的validation的事件，再加一些東西就可以把提示的訊息變成對話框內呈現了。

view plaincopy to clipboardprint

1. errorPlacement: function(error, element)   
2.             {   
3.                 // Set positioning based on the elements position in the form   
4.                 var elem = $(element);   
5.   
6.                 // Check we have a valid error message   
7.                 if(!error.is(':empty')) {   
8.                     // Apply the tooltip only if it isn't valid   
9.                     elem.filter(':not(.valid)').qtip({   
10.                         overwrite: false,   
11.                         content: error,   
12.                         position: {   
13.                             my: "left center",   
14.                             at: "center right"  
15.                         },   
16.                         show: {   
17.                             event: false,   
18.                             ready: true  
19.                         },   
20.                         hide: false,   
21.                         style: {   
22.                             classes: 'qtip-red' // Make it red... the classic error colour!   
23.                         }   
24.                     })   
25.   
26.                     // If we have a tooltip on this element already, just update its content   
27.                     .qtip('option', 'content.text', error);   
28.                 }   
29.   
30.                 // If the error is empty, remove the qTip   
31.                 else { elem.qtip('destroy'); }   
32.             },   
33.             success: $.noop, // Odd workaround for errorPlacement not firing!  

Demo