jQuery Tooltip是一種非常實用的技術,它可以通過簡單的代碼實現鼠標hover時的提示信息顯示。而jQuery Live Tooltip更是一種強大的擴展,它能夠動態地顯示提示信息。
$(function() { // 鼠標移動時的提示信息 $(document).tooltip({ items: ".hoverable", content: function() { var element = $(this); if(element.is(".hoverable")) { return element.attr("data-tooltip"); } }, position: { my: "left+15 bottom", at: "center top" }, show: { effect: "fadeIn", duration: 300 }, hide: { effect: "fadeOut", duration: 200 } }); // 動態綁定提示信息 $(document).on("mouseover", ".live-tooltip", function() { var data = $(this).data("live-tooltip"); if(data) { $(this).attr("title", data); $(this).tooltip("enable"); } }); });
以上代碼實現了兩種不同的提示效果,第一種是靜態提示,當鼠標懸浮在元素上時,顯示設定好的內容。第二種是動態提示,當元素上有data-live-tooltip屬性時,可以動態地顯示提示內容。
在使用 jQuery Live Tooltip 時,需要注意一些細節,例如需要在元素上添加 data-live-tooltip 屬性,然后才能執行 JavaScript 代碼。同時,也需要對提示信息的位置、動畫效果、持續時間等進行配置,以便展現最佳的用戶體驗。