JQUERY更改标题不适用于工具提示 [英] JQUERY Change Title not working with tooltip

问题描述

我在JQUERY UI中使用JQUERY来更改一小段文本的标题值.当页面首次加载时，工具提示可以正常工作，并显示我的单击以展开"工具提示.当用户单击更多..."或更少..."文本时，它应该触发点击功能(确实如此)；切换博客帖子的可见性(确实如此)；将文本从更多切换到更少，反之亦然(确实如此)；然后更新按钮的标题，以便工具提示显示新文本(在Chrome中，它确实会更新).但是，工具提示永远不会更改，即使标题显示为折叠后"，工具提示仍显示为单击以获取更多信息".

如何以JQUERY UI工具提示看到更新并在鼠标悬停时正确报告新值的方式动态更新标题?

/*
 * 
 * @DocumentReady
 */
$(window).ready(function(){ //Checks if the document is ready

    /*
     *
     *
    */
    $(".moreButtonClass").click(function(){ //Handles the button click
        // just leaves the number and appends to make the div ID
        var postID      = "#post" + this.id.replace(/[^\d]/g, "");
        var moreButton  = "#moreButton" + this.id.replace(/[^\d]/g, "");
        $(postID).toggle(); // Toggle visibility
        if($(postID).is(":visible")) {
            $(moreButton).text("less...");
            $(moreButton).attr("title", "Collapse Post");
        } else {
            $(moreButton).text("more...");
            $(moreButton).attr("title", "Show Post");
        }
    }); //Close the function

    /*
     *
     *
    */
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. ");
            });
        }
    }); // Close the function

    /*
     * 
     */
    $(function() {
        $( document ).tooltip({track: true}); // Allow JQUERY to handle tooltips
    }); // Close the function

}); // Close the Document Ready Function

解决方案

您不能使用

$(moreButton).attr("title", "Show Post");

因为工具提示已由jQuery UI初始化.而是使用此:

$(moreButton).tooltip( "option", "content", "Show Post - test" );

RTM: http://api.jqueryui.com/tooltip/#option-content

I am using JQUERY with JQUERY UI to change the value of the title for a small string of text. When the page first loads the tool tip works fine and shows my "Click to expand" tool tip. When the user clicks on the "more..." or "less..." text it should trigger the click function (which it does); toggle visibility of the blog post (which it does); toggle the text from more to less or vice versa (which it does); and then update the title for the button so the tool tip shows the new text (which it does update as seen in Chrome). However, the tooltip never changes and even though the title says "Collapse Post" - the tooltip still says "Click for more".

How do I dynamically update my title in a way that JQUERY UI tooltip sees the update and reports the new value correctly on mouseover?

/*
 * 
 * @DocumentReady
 */
$(window).ready(function(){ //Checks if the document is ready

    /*
     *
     *
    */
    $(".moreButtonClass").click(function(){ //Handles the button click
        // just leaves the number and appends to make the div ID
        var postID      = "#post" + this.id.replace(/[^\d]/g, "");
        var moreButton  = "#moreButton" + this.id.replace(/[^\d]/g, "");
        $(postID).toggle(); // Toggle visibility
        if($(postID).is(":visible")) {
            $(moreButton).text("less...");
            $(moreButton).attr("title", "Collapse Post");
        } else {
            $(moreButton).text("more...");
            $(moreButton).attr("title", "Show Post");
        }
    }); //Close the function

    /*
     *
     *
    */
    $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. ");
            });
        }
    }); // Close the function

    /*
     * 
     */
    $(function() {
        $( document ).tooltip({track: true}); // Allow JQUERY to handle tooltips
    }); // Close the function

}); // Close the Document Ready Function

解决方案

You can't use

$(moreButton).attr("title", "Show Post");

Because the tooltip get initialized by jQuery UI. Instead use this:

$(moreButton).tooltip( "option", "content", "Show Post - test" );

RTM: http://api.jqueryui.com/tooltip/#option-content

这篇关于JQUERY更改标题不适用于工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！