ILikeTurtles ILikeTurtles - 21 days ago 7
jQuery Question

JQUERY Change Title not working with tooltip

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

Answer

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

Comments