javascript - 用 jQuery 工具提示替换所有标题默认工具提示

Question

我正在尝试使用允许我定义自定义工具提示的小型 jQuery 脚本替换我的应用程序中所有元素的默认工具提示（title=" * "）。

<div>
    <input type="text" title="default tooltip" />
    <textarea type="text" title="default tooltip"></textarea>
    <select title="default tooltip"><option>select</option></select>
 </div>

.

$(function() {
$('input, textarea, select, p, label').tooltip({
hide: {
effect: "explode",
delay: 250
}
});
});

检查小提琴：http: //jsfiddle.net/tnEmZ/1/

Answer 1

var $title = $("a,input,p,label,textarea[title]"); //get all elements with the title-Attribute

//loop through title-elements
$.each($title, function(index, value) {
    $(this).tooltip({
        show: {
             effect: "explode",
             delay: 250
        },
        hide: {
            effect: "explode",
            delay: 250
       }
    });  
});

演示在这里

Answer 2

希望这个DEMO能帮到你。

$(document).ready(function() {
        // Tooltip only Text
        $('.masterTooltip').hover(function(){
                // Hover over code
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="tooltip"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
                // Hover out code
                $(this).attr('title', $(this).data('tipText'));
                $('.tooltip').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.tooltip')
                .css({ top: mousey, left: mousex })
        });
});

---

另一个例子在这里jquery tooltip。

来源：http: //jqueryui.com/tooltip/

Answer 3

工具提示小部件不是 jQuery 的一部分，而是 jQueryUI 的一部分。此外，它不适用于您的 jsfiddle，因为工具提示小部件随 jQueryUI 1.9.0 一起提供，而您的 jsfiddle 使用 jQueryUI 1.8.3。请参阅此处了解更多信息。