最近要為一個頁面上的所有 input 欄位加上 tooltip，採用的 plugin 網址。作法如下：

首先頁面 include plugin 的 javascript 及 css

<script type=”text/javascript” src=”jquery.tooltip.min.js”></script>

<link href=”jquery.tooltip.css” rel=”stylesheet” type=”text/css”>

tooltip 的內容這次是藏在 div 內，再由 javascript 取出顯示，當然很容就可以修改成將內容放在資料庫內

<div id=”price_tooltip” style=”display:none”>

這是售價欄位說明

</div>

接下來在 document ready 時設定 input 檔位的 tooltip，以 input 欄位的 id 加上 _tooltip 字串，取出對應 div 的內容

$(“:input”).tooltip({

delay: 0,

showURL: false,

bodyHandler: function() {

var id=this.id;

var tooltip_id=id+”_tooltip”;

return $(“#”+tooltip_id).html();

}

});

(No Ratings Yet)

Loading...