动态更改jQuery工具提示

Question

jsfiddle example of what i am trying

  <div class="name1" title=" Air jordan ">mike jordan</div>

thats my html .

I want to change the tooltip dynamically to say "air jordan 12:44pm is mike jordan" i know how to get the 12:44pm. what i dont know is how to change the tooltip dynamically while reading the original element. I have to change the title element in order to change the tooltip right?

here is what I am trying

 $( ".name1" ).tooltip({
content: function() {
  console.log("1234");
  var element = $( this );
  return "gerd";
}
});

I feel like i am going down a very wrong path. I dont even see the console logs inside of the function. Is there a way to fix this?

Or Should I 1. see if the element has a mouseenter, 2. then quickly change the title attritubte then 3 add a .tooltip?

Answer 1

Assuming that by 'tooltip' you mean the text that you see when you hover over the element (which is just the value of the title attribute), then you can use jQuery to simply edit the title attribute directly.

$('.name1').attr('title','air jordan ' + yourFormattedDateTimeFunction() + ' is mike jordan');

EDIT:

A little Googling leads me to think you're referring specifically to the jQueryUI tooltip method, which is a bit fancier than standard tooltips. I'm not overly familiar with how this method works, but based on the API , I'd say your biggest problem is that you're passing a function handler to 'content', as opposed to actually executing a function which would create the string you need. I suggest you read up on Immediately Invoked Function Expressions for an explanation on the difference between these formats. So theoretically, your code should look something like this:

$('.name1').tooltip({
    content: (function () {
                 console.log('this should show up now');
                 return 'air jordan ' + yourFormattedDateTimeFunction() + ' is mike jordan';
             })()
});