Question

这是webdesign tuts+的工具提示脚本。效果很好，但无法禁用默认工具提示。

我缺乏相应更新此脚本的技能。我非常感谢能够禁用默认工具提示的编辑！

感谢。

<script type="text/javascript">
    $("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element
        var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
        var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element
        var $tooltip_text = $(this).attr("title"); //get title attribute of "a" element

        if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters

            $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above

            $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left
            $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left
            $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left

            $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip
        }
    });

    $("a").mouseleave(function () { //event fired when mouse cursor leaves "a" element
        var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "

        //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue
        $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
            $(this).remove();
            $(this).dequeue();
        });
    });
</script>

Answer 1

理论上，这应该有效，但我还没有测试过：

<script type="text/javascript">
var $tooltip_text;

$("a.tooltip_link").mouseenter(function (e) { //event fired when mouse cursor enters "a" element
        var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
        var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element
        $tooltip_text = $(this).attr("title"); //get title attribute of "a" element


    /* 
    *  My changes:
    */

        $(this).attr("title", ""); // remove title text to stop default tooltip

        // end changes (one more in the bottom function


    if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters

        $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above

        $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left
        $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left
        $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left

        $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip
    }
});

$("a.tooltip_link").mouseleave(function () { //event fired when mouse cursor leaves "a" element
    var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "

    //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue
    $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
        $(this).remove();
        $(this).dequeue();
    });


    /* 
    *  My changes:
    */
    $(this).attr("title", $tooltip_text); // return the title text to the anchor element
    // end changes


});
</script>

我评论了我的变化，所以你可以看到它们，也许可以学习......这就是假设我所做的事实际上有效。

Answer 2

试试这个。它会在工具提示显示时删除title属性，因此默认值不显示，然后再次设置title属性。

以下是一个例子：http://jsfiddle.net/pnc3r/2/

    var $tooltip_text;

    $("a").mouseenter(function (e) { //event fired when mouse cursor enters "a" element
            var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "
            var $x = e.pageX - this.offsetLeft; //get mouse X coordinate relative to "a" element
            $tooltip_text = $(this).attr("title"); //get title attribute of "a" element

            if ($(this).hasClass("tooltip_link")) {

                $(this).attr("title",""); // removes the tooltip
            }

            if ($tooltip_text.length > 0) { //display tooltip only if it has more than zero characters

                $(this).append('<div class="tooltip ' + $class_name + '">' + $tooltip_text + '</div>'); //append tooltip markup, insert class name and tooltip title from the values above

                $("a > div.tooltip.center").css("left", "" + $x - 103 + "px"); //set tooltip position from left
                $("a > div.tooltip.left").css("left", "" + $x + "px"); //set tooltip position from left
                $("a > div.tooltip.right").css("left", "" + $x - 208 + "px"); //set tooltip position from left

                $("a > div.tooltip." + $class_name).fadeIn(300); //display, animate and fade in the tooltip
            }
        });

        $("a").mouseleave(function () { //event fired when mouse cursor leaves "a" element

            $(this).attr("title",$tooltip_text); // puts the tooltip back
            $tooltip_text = "";

            var $class_name = $(this).attr("class").slice(13); //get class attribute of "a" element after leaving 13 characters which is equal to "tooltip_link "

            //fade out the tooltip, delay for 300ms and then remove the tooltip and end the custom queue
            $("a > div.tooltip." + $class_name).fadeOut(300).delay(300).queue(function () {
                $(this).remove();
                $(this).dequeue();
            });
        });

编辑jquery工具提示脚本以禁用默认工具提示

2 个答案: