jQuery 好用的插件 cluetip 利用 元素的title 加強顯示說明

元素的title屬性可以用來顯示這個元素的一些額外說明(會跑出一個小小的Tip)。

這個插件就是用來加強這樣的功能,並且可以判斷我們所指定的字元或字串來進行title顯示時的斷行。這樣可以使得注解更容易被閱讀。

clueTip的下載頁面 ,最新版本是1.07。

使用方法

最簡單的用法就是在我們要顯示說明的元素上將要說明的文字訊息,完整的打上。

像是這樣<div id=’cluetip_test’ title=’詳細說明|從這邊開始已經換行囉!!’>移過來我就會跳出詳細說明</div>

<script>
...............................
$(document).ready(function(){
$('#cluetip_test').cluetip({splitTitle:'|'});
});
...............................
</script>

以下是使用cluetip 螢幕的截圖

補充
cluetip似乎會產生物件來儲存title裏頭的資訊,所以我們元素title內的文字被清掉後並不會影響cluetip的顯示。想要移除cluetip的效果就要指定銷毀cluetip所產生的物件。
$(‘.title_element’).cluetip(‘destroy’);

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s