jQuery Tools Tooltip - Change Title

Got a problem with the jquery plugin Tools tooltip (http://flowplayer.org/tools/tooltip/index.html) I need to change the title of the element..

   reloadTooltip();
   $("#example"开发者_StackOverflow社区).attr('title', obj.text);
   reloadTooltip();

   function reloadTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

Html Part:

   <span title="text" id="example"></span>

With my solution i got finally 2 titles, one above the other. The unstyled (ignored js), is the new one. The Tools tooltip title has not changed yet.

thank you

got it ! according to recently version of tooltip (as of v2.3.1) https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 you need to set the attribute (not the property) 'data-original-title' because this one is that tooltip is currently using.

It's a hack but I hope it works for you as it worked for me.

$('#example').attr('data-original-title','the new text you want'); //and that's it.

I'm about to do the same thing. I looked through the Tooltip plugin code, and discovered as quick and easy way to update the tooltip. The plugin removes the title attribute and puts that content into an element property called tooltipText. In jQuery 1.6+, it can be manipulated like so:

// get the current tooltip content
$('#someElement').prop('tooltipText')

// set the tooltip content
$('#someElement').prop('tooltipText', 'w00t');

The plugin sets the tooltipText property (note the capitalization) at line 55 in version 1.3. Changes done this way are instantaneous as far as I can tell.

If doing direct element manipulation, the tooltip content is at:

var e = document.getElementById('#someElement');
alert(e.tooltipText);
e.tooltipText = 'w00t';

Don't know if you are still looking for the answer to this but I have just spent a good couple of hours trying to sort the same thing and have found the answer (simple as they always are once you find them!) in the API documentation.

Whatever the element is that you set the tooltip on in the first place, get the tooltip API from it and set the new value. i.e. if you set the tooltip on an element with id "myTip"

$('#myTip').data('tooltip').getTip().html("New string!") ;

Et voila.

You shouldn't need to remove the title (and shouldn't anyway as tooltips are lazy initialised). Instead use cancelDefault configuration:

http://flowplayer.org/tools/tooltip/index.html

All the other options didn't work on the last release of tooltipster (3.3.0) I found this command work:

$('#selectorElement').tooltipster('content', 'new title');

How about this?

   initTooltip();
   updateTooltip(obj.text);


   function initTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

   function updateTooltip(text){
       $("[title]").attr('title', text);
       $("[title]").data('title',text);
       $("[title]").removeAttr("title");   
    }

I don't know if it's the best approach but I think it might work for you.

Is the obj.text correct? What comes in obj.text ?

This worked for me:

$('#yourID').attr('data-original-title', 'New Message').tooltip('show').tooltip('hide');

Another solution to change the title dynamically is to use the onBeforeShow event:

jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow});

...

function tooltipBeforeShow() {
  // On production you evaluate a condition to show the apropiate text
  var text = 'My new text for the <b>tooltip</b>';
  this.getTip().html(text);
}

this refers to the tooltip object on the event function

Nothing worked for me but to reinitialize the tooltip:

        //Save the current configuration.
        var conf = trigger.data('tooltip').getConf();
        trigger.removeData('tooltip').unbind();
        //Add the changed text.
        var newText = 'Hello World!';
        trigger.attr("title", newText);
        //Reapply the configuration.
        trigger.tooltip(conf);

The previous answers involving getTip() require that the tooltip be shown at least once; otherwise, getTip() yields a null.

Using the OnBeforeShow almost worked for me, but I couldn't figure out how to unbind the event so that it wouldn't execute every single time I showed.

Changing the title did not work for me for some reason, possibly due to the fact I was using a custom layout.

Try to modify the title value by calling jQuery's data("title") method.

I also struggled with this. And this code worked for me:

$('.yourelement').attr('tooltipText', newToolTip);

Please note the upper case T. Lower case T will not work.

Best tooltip for me! This tooltip like on Gmail

on head site:

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">

On HTML:

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

On Javascript codes:

$(function() {
    $('.example').tipsy();
});

Visit Demo jsfiddle

All of the above doesn't work with the latest version of tooltipster, the correct way is:

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";