Changing the title attribute using jQuery while hovering over the element

Question

I have div button that has a title attribute that us used as the text for tool tips using jQueryUI. I would like to change the tooltip of the button by clicking it. However, when the button is clicked and the call back function is fired, the mouse is over the div and title is null.

How do I go about fixing this behaviour? It looks like jQueryUI Tooltip widget removes the title on hover and puts it back on mouse out.

$( document ).tooltip();
$(".btn").click(function(){
    alert($(this).attr("title")); // Expect to see T1 or T2 but shows blank
    if ($(this).attr("title")=="T1"){
        $(this).attr("title","T2")
    }else{
        $(this).attr("title","T1")
    }
});

Live: http://jsfiddle.net/lordloh/ckTjA/

Without the jQueryUI Tooltip widget in place, things seem to work fine : http://jsfiddle.net/lordloh/ckTjA/1/

Moreover, I have the tooltip widget applied on $(document). So I cannot use $(this).tooltip("option","content") as the tooltip is not applied on $(this) explicitly. This results in a Javascript error on the console.

2013-02-18: As of now, I am running $(document).tooltip("destroy");, changing title attributes and $(document).tooltip();. Not an elegant solution :-( I am looking for something that is not a hack.

BG100 · Accepted Answer · 2013-03-04 11:31:35Z

4

The widget removes the text from the title attribute to prevent the native browser tooltip from appearing. When it removes the text, it stores it in data attached to the element.

You can do the same using this line of code:

$("#my-element").data("ui-tooltip-title", "My new tooltip message");

Now, if the user moves their mouse away from the element, and then hovers back onto it, it will show the new text.

To show the new text immediately, you need to update the live tooltip overlay element, which thankfully is easy to find. You just need to do this after you've updated the text:

$(".ui-tooltip-content").html($("#my-element").data("ui-tooltip-title"));

_{Tested on jQuery UI 1.10.0.}

edited Mar 4, 2013 at 11:31

answered Feb 28, 2013 at 16:15

BG100

4,5412 gold badges41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lord Loh. Over a year ago

Thanks. Why can't I access it through $(this).attr("data-ui-tooltip-title") ?

Lord Loh. Over a year ago

I see two entries in the docs - api.jquery.com/jQuery.data and api.jquery.com/data. The latter seems to be using the HTML5 attribute data-*. I assume that the $("#my-element").data("ui-tooltip-title") is storing the data elsewhere(?).

BG100 Over a year ago

I think jQuery only stores info in the HTML5 data-xxx if the element has the data attribute to start with. If it doesn't then it stores it in an internal array or something like that.

Pointy · Accepted Answer · 2013-02-17 22:37:49Z

2

When using the tooltip widget, you can update the contents via its own API:

    $(this).tooltip('option', 'content', "New Content Goes Here");

answered Feb 17, 2013 at 22:37

Pointy

415k62 gold badges600 silver badges631 bronze badges

4 Comments

Lord Loh. Over a year ago

Unfortunately, this does not seem to work on $(this) as I have set the tooltip on document.

Pointy Over a year ago

@LordLoh. well maybe you should do it differently :-)

Lord Loh. Over a year ago

As of now, I am running $(document).tooltip("destroy");, changing title attributes and $(document).tooltip();. Not an elegant solution :-(

Pointy Over a year ago

@LordLoh. yes I agree - well I think maybe the "items" command may be what you need; I'm not that familiar with that widget as I think I've only used it once, a long time ago, but I think that the "items" command paired with "content" lets you pick which elements to affect.

user2935683 · Accepted Answer · 2013-10-31 13:30:10Z

0

Try this:




  $('document').ready(function() { $( 'document' ).tooltip();
  $(".btn").click(function(){
      alert($(this).attr("title"));
      if ($(this).attr("title")=="T1"){
          $(this).attr("title","T2"); 
      }else{
          $(this).attr("title","T1");
      } 
    }); 
  });

$( 'document' ) should be in single or double quotes(' or ") and it works fine for me whitout $( 'document' ).tooltip();

edited Oct 31, 2013 at 13:30

answered Oct 30, 2013 at 9:46

user2935683

11 bronze badge

Collectives™ on Stack Overflow

Changing the title attribute using jQuery while hovering over the element

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related