jQuery Tools Tooltip - Change Title

Question

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").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

Declinature

Picture of the fail: i.imgur.com/Be4zS.png Also found that there is a class wich contain all the tooltip texts.. <div class="tooltip" style="top: 380px; left: 847px; position: absolute; display: none; ">208 + 3</div> (auto generated by the jquery plugin i think) – Declinature

Answer 1

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';

Swacked

Answer 2

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.

Fireproofing

This is the only answer that works for me, in angular v1.3 with bootstrap. – Nilsson

Same for me with Bootstrap 4 and Angular 5 – Faires

Answer 3

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

Backwards

This worked great. I wanted to dynamically create the tooltip based on the element that triggered the tooltip. This is a silly example, but this is what I did: onBeforeShow: function (b) { this.getTip().html($(b.target).attr('id')); } – Academe

Answer 4

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');

Evered

Answer 5

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 ?

Proffer

yea this is correct. I can alert it without a problem. var obj = jQuery.parseJSON(data); – Declinature

is there a reason for you not to do: function reloadTooltip(){ $("#example").tooltip({ position: "bottom right", opacity: 1 }); } – Proffer

I've tried already. Unfortunately there is no difference to the above-stated possibility.. :( – Declinature

var d = document.getElementById("example"); d.setAttribute('title', obj.text); instead of the jquery attr call. Does anything? – Proffer

It ve the same effect.. (i.imgur.com/Be4zS.png) ty anyway .. do u ve another idea? – Declinature

Answer 6

This worked for me:

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

Jeramyjerba

Answer 7

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

Cygnus

how did you find out this event ? this is not in the doc. – Fireproofing

Answer 8

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.

Chilt

Answer 9

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

Kellerman

I'm using v1.2.6 and this is the only thing that worked for me. $('tooltip selector').data("title", "some tooltip text"); – Profanity

Answer 10

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.

Groovy

Answer 11

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

Broach

Answer 12

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";

Subplot