javascript - Tooltips are not removed from DOM after destroy event - Stack Overflow

admin管理员组

文章数量:1279236

When tooltip is active/focused and destroy event is called the tooltip gets opacity 0, but still clickable and its element still in the DOM.

The problem is reproduced in this Demo: When test button is clicked the tooltip gets "destroyed", but it's still in the DOM and blocks click events on the text input.

Is it normal behaviour? Any clean workarounds?

UPD: seems to be a known issue

When tooltip is active/focused and destroy event is called the tooltip gets opacity 0, but still clickable and its element still in the DOM.

The problem is reproduced in this Demo: When test button is clicked the tooltip gets "destroyed", but it's still in the DOM and blocks click events on the text input.

Is it normal behaviour? Any clean workarounds?

UPD: seems to be a known issue

• javascript
• css
• twitter-bootstrap
• twitter-bootstrap-3

Share Improve this question Follow edited Oct 10, 2013 at 18:11 Maksim Vi. asked Oct 10, 2013 at 17:44 Maksim Vi.Maksim Vi. 9,2351212 gold badges6060 silver badges8585 bronze badges 1

• @Dvir, it's a cross-browser issue – Maksim Vi. Commented Oct 10, 2013 at 17:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

How about if you use disable instead of destroy?

Fiddle

Yes, There is a workaround. Remove data-toggle="tooltip" from your markup. That is what is causing tooltip to be displayed again. Because you still have the data attribute on the tooltip which bootstrap listens to. Your constructor in the js is enough, placing both the data-* for tooltip and tooltip constructor in JS is not necessary.

 <input id="testBtn" class="btn btn-default" type="button" value="Test"  title="Test Destroy Event"/>

Demo

Update

it is a bug in older version of Bootstrap, So to fix it in older version you can remove the $tip element by grabbing it from Data.

        var $this = $(this);
        $this.data('bs.tooltip').$tip.remove(); //remove the tip element.
        $this.tooltip('destroy'); //destroy it now.

Demo

Remember even if you disable the element, it still holds the data in the element, and the reference of the element inside the bootstrap for a possibility of later usage which is unnecessary

本文标签： javascriptTooltips are not removed from DOM after destroy eventStack Overflow