Bootstrap's tooltip doesn't disappear after button click & mouseleave

javascript twitter-bootstrap tooltip
SilentCry picture SilentCry · Nov 7, 2015 · Viewed 73.2k times · Source

I have a problem with bootstrap's tooltip : When I click on a button, tooltip stays even if is the cursor is outside of the button. I have looked into the manual - Bootstrap's tooltip and if I'm clicking on the buttons, I see the same problem. Is there any solution to fix this? Just tried in latest FF, IE.

Answer

davidkonrad picture davidkonrad · Nov 7, 2015

This is because trigger is not set. The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.

So all you have to do is to define trigger as 'hover' only. Below the same example you have linked to without persisting tooltips after a button is clicked :

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})

the doc example in a fiddle -> http://jsfiddle.net/vdzvvg6o/

Related questions

How to add a twitter bootstrap tooltip to an icon

I would add a right-tooltip from twitter bootstrap to an icon element. The code is this: <h3>Sensors Permissions <i class="icon-info-sign"></i></h3> I would that, when the cursor is over …

Read More
bootstrap "tooltip" and "popover" add extra size in table

Note: Depending on you Bootstrap version (prior to 3.3 or not), you may need a different answer. Pay attention to the notes. When I activate tooltips (hover over the cell) or popovers in this code, size of table is increasing. How …

Read More
How to make bootstrap tooltip remain visible till the link is clicked

I have a link which I am going to use as notification when a user has some new notification I am going to notify the user by showing a tooltip(twitter bootstrap tooltip). What I want to achieve is, that …

Read More