【问题标题】:JQUERY Change Title not working with tooltipJQUERY 更改标题不适用于工具提示
【发布时间】:2026-02-01 02:45:01
【问题描述】:

我正在使用 JQUERY 和 JQUERY UI 来更改一小段文本的标题值。当页面首次加载时,工具提示工作正常并显示我的“单击以展开”工具提示。当用户点击“更多...”或“更少...”文本时,它应该触发点击功能(它确实如此);切换博客文章的可见性(它确实如此);将文本从更多切换到更少,反之亦然(确实如此);然后更新按钮的标题,以便工具提示显示新文本(它确实会更新,如 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

【问题讨论】:

    标签: jquery jquery-ui jquery-ui-tooltip


    【解决方案1】:

    你不能用

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

    因为工具提示是由 jQuery UI 初始化的。而是使用这个:

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

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

    【讨论】:

    • 我收到“未初始化”错误,所以我的解决方案是: $(moreButton).tooltip().tooltip( "option", "content", "Show Post - test" );
    【解决方案2】:

    我在引导程序中使用 Jquery,但这些都不起作用。我必须这样做:

    $("#myelement").attr("data-original-title", "New title/message" );
    

    这在使用 ajax 的动态加载模式内部起作用 - 原始页面元素已更改,因此看起来很可靠。

    【讨论】: