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

Picture of the fail: http://i.imgur.com/Be4zS.png Also found that there is a class wich contain all the tooltip texts..
208 + 3
(auto generated by the jquery plugin i think) — smo, Jul 12 '11 at 05:23

score 24 · Answer 1 · answered May 01 '13 at 20:57

24

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.

answered May 01 '13 at 20:57

alexserver

1,348
3
15
30

This is the only answer that works for me, in angular v1.3 with bootstrap. – miyasudokoro Apr 06 '15 at 17:45
1

Same for me with Bootstrap 4 and Angular 5 – hughjdavey Feb 13 '18 at 18:35

score 20 · Accepted Answer · answered Sep 09 '12 at 23:32

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

score 8 · Answer 3 · answered Aug 27 '11 at 19:19

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

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')); } — Eric, Apr 19 '13 at 15:35

score 4 · Answer 4 · answered Apr 02 '15 at 07:18

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

answered Apr 02 '15 at 07:18

Roy Shmuli

4,979
1
24
38

score 2 · Answer 5 · edited Dec 18 '20 at 22:01

2

This worked for me:

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

edited Dec 18 '20 at 22:01

Trenton McKinney

56,955
33
144
158

answered Nov 14 '16 at 01:52

FD gi

43
6

Rui Lima · Answer 6 · 2011-07-12T10:30:00.113

2

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 ?

edited Jul 12 '11 at 10:30

answered Jul 11 '11 at 13:37

Rui Lima

7,185
4
31
42

yea this is correct. I can alert it without a problem. var obj = jQuery.parseJSON(data); – smo Jul 11 '11 at 13:39
is there a reason for you not to do: function reloadTooltip(){ $("#example").tooltip({ position: "bottom right", opacity: 1 }); } – Rui Lima Jul 11 '11 at 13:44
I've tried already. Unfortunately there is no difference to the above-stated possibility.. :( – smo Jul 11 '11 at 13:59
var d = document.getElementById("example"); d.setAttribute('title', obj.text); instead of the jquery attr call. Does anything? – Rui Lima Jul 11 '11 at 15:31
It ve the same effect.. (http://i.imgur.com/Be4zS.png) ty anyway .. do u ve another idea? – smo Jul 12 '11 at 05:22

score 1 · Answer 7 · answered Jun 19 '12 at 17:53

1

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

answered Jun 19 '12 at 17:53

Ismaelj

11
1

how did you find out this event ? this is not in the doc. – alexserver May 01 '13 at 20:45

score 1 · Answer 8 · answered Feb 28 '14 at 11:25

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.

score 0 · Answer 9 · edited Nov 05 '12 at 16:38

0

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.

edited Nov 05 '12 at 16:38

sth

222,467
53
283
367

answered Nov 05 '12 at 15:40

live-love

48,840
22
240
204

score 0 · Answer 10 · answered May 25 '14 at 19:08

Best tooltip for me! This tooltip like on Gmail

enter image description here

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

score 0 · Answer 11 · answered Jul 05 '14 at 07:27

0

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

answered Jul 05 '14 at 07:27

Rabih Kodeih

9,361
11
47
55

score 0 · Answer 12 · answered Jul 11 '11 at 13:45

0

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

answered Jul 11 '11 at 13:45

Marco Schmid

174
2

I'm using v1.2.6 and this is the only thing that worked for me. `$('tooltip selector').data("title", "some tooltip text");` – Phil Hale Jul 02 '13 at 15:11

jQuery Tools Tooltip - Change Title

12 Answers12