How to delete or remove the tooltip from javascript?

Question

I am creating an icon in javascript with tooltip.

var icon = '&nbsp;&nbsp;<a class="icon-ok" data-type="reftooltip" title="Save" style="cursor: pointer"></a>';

this icon is displayed and removed dynamically. When I am removing this icon dynamically from javascript by using below code:

success: function(){
//other code//
saveparents.parent().parent().find('a.icon-ok').remove();
//other code//
}

icon is getting removed but tooltip "Save" is still displayed on UI. When I refresh the page, it disappears. But I want it to remove as soon as icon-ok gets removed.

Also I debugged in firebug and found that a div class for tooltip is being created in html page

<html><body>
<div ...................>... </div> 
<div class="tooltip fade top in" style="top: 156.5px; left: 256.667px; display: block;">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner">Save</div>
</div>
</body></html>

From firebug I can remove this div by right clicking on deletenode. It successfully removes from UI as well. So I think if I do this using javascript code, it should be removed.

But I don't know what code to put in success function to delete that div class tooltip fade top in. I need help here.

xpy · Accepted Answer · 2013-04-19 06:37:20Z

7

You should probably have to remove tha actual tooltip as well:

$('body>.tooltip').remove();

Or even better, use your tooltip's native remove function.

answered Apr 19, 2013 at 6:37

xpy

5,6713 gold badges32 silver badges52 bronze badges

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

Comments

Anirudh Ramanathan · Accepted Answer · 2013-04-19 06:08:50Z

5

The title attribute becomes the tool-tip text in some browsers. Remove that (either directly, or using Javascript) and it should go away.

http://www.w3.org/TR/WCAG20-TECHS/H33.html

Some graphical user agents will display a tool tip when the mouse hovers above an anchor element containing a title attribute.

edited Apr 19, 2013 at 6:08

answered Apr 19, 2013 at 5:59

Anirudh Ramanathan

46.8k24 gold badges137 silver badges195 bronze badges

Comments

egig · Accepted Answer · 2013-04-19 06:21:04Z

3

I guess it's worth to try:

success: function(){
 //other code//
   ('a.icon-ok').removeAttr("title");
 //other code//
}

EDIT:

I read again your question:

But I don't know what code to put in success function to delete that div class tooltip fade top in. I need help here.

try this way:

success: function(){
 //other code//
   ('div').removeClass("tooltip fade top in"); //<-- costumize your selector
 //other code//
}

good luck !!

edited Apr 19, 2013 at 6:21

answered Apr 19, 2013 at 6:04

egig

4,4405 gold badges31 silver badges50 bronze badges

3 Comments

Girish Over a year ago

@Charlie: it still didnt work.. but i got the solution.. thanks :)

egig Over a year ago

Congrats ! . why dont you just create an answer? maybe useful for others. :)

Ajay Singh Over a year ago

works when removing "title" as well as "data-original-title" attributes

Binil Anto · Accepted Answer · 2019-12-19 07:58:24Z

2

I've tried all these answer, but what worked for me is this,

$("#id").tooltip( "destroy" );

Or you can also use

$("#id").tooltip( "close" );

But, I prefer the first one.

answered Dec 19, 2019 at 7:58

Binil Anto

1171 silver badge12 bronze badges

Comments

Girish · Accepted Answer · 2013-04-19 08:17:14Z

1

Thanks all for your valuable inputs!! I added this line in success() function and it worked

$("[class='tooltip fade top in']").remove();

answered Apr 19, 2013 at 8:17

Girish

1673 gold badges3 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to delete or remove the tooltip from javascript?

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related