JQUERY Change Title not working with tooltip

Question

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

Deville

Answer 1

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

Refer

I got a "not initialized" error so the solution for me was: $(moreButton).tooltip().tooltip( "option", "content", "Show Post - test" ); – Often

Answer 2

I was using Jquery with bootstrap and neither of these worked. I had to do this:

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

This worked from inside a dynamically loaded modal using ajax - and the original page elements were changed so it seems solid.

Wilser