Geek Answers Handbook

Tooltips are not removed from the DOM after a kill event

When the tooltip is active / focused and the destroyevent is called a tooltip, an opacity of 0 appears but is still clickable and its element is still in the DOM.

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

Is this normal behavior? Any clean workarounds?

UPD : seems to be a known issue

+4
source share
2 answers

How about using disableinstead destroy?

Fiddle

+6
source

Yes, there is a workaround. Remove data-toggle="tooltip"from your markup. This is what causes the tooltip to pop up. Since you still have the data attribute in the tooltip that bootstrap is listening on. Your js constructor is enough, so you don't need to use the data-*tooltip constructor and tooltip constructor in JS.

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

Demo

Update

this is a bug in the old version of Bootstrap, so to fix it in an 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

, , - ,

+5

More articles:


All Articles