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
       }
    });  
});

演示here

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 })
        });
});

另一个 HERE 示例jquery tooltip。

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

Answer 3

工具提示小部件不是jQuery的一部分，而是jQueryUI的一部分。此外，它不适用于你的jsfiddle，因为工具提示小部件带有jQueryUI 1.9.0，你的jsfiddle使用jQueryUI 1.8.3。有关详细信息，请参阅here。

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

3 个答案: