Отредактируйте скрипт всплывающей подсказки jquery, чтобы отключить всплывающие подсказки по умолчанию

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

Попробуй это. Он удаляет атрибут 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();
            });
        });

Answer 2

Теоретически, это должно работать, хотя я не проверял это:

<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>

Я прокомментировал свои изменения, чтобы вы могли их увидеть и, возможно, узнать ... это предполагаетсделано на самом деле работает.