Dev Blog

Hide tooltips on dropdowns in twitter's bootstrap 3

Tooltip left over dropdown — Tooltip left visible over
dropdown

When using tooltips on buttons which have dropdown menus, the tooltip might not disappear as we would like to, leaving it visible. This might even block user action. To avoid this issue, tooltip need to be hidden when dropdown is shown. But it turned out that it is not enough, as it might pop up again. Also when dropdown is closed by another click, tooltips still might be left visible.

In summary

It turned out that tooltip must be hidden on events:

Dropdown shown
Dropdown hidden
Mouse entering dropdown menu

Delegation

The best way to initialize tooltip is by delegation, so that tooltips will be displayed on dynamically created elements too. So must be said events bound too. The initialization values have impact on how to handle tooltip hiding. In case of delegation, the containing element should be used as selector.

Delegated initialization

Example of delegated initialization:

$('body').tooltip({
        container: 'body',
        selector:'[rel~="tooltip"]'
})

To hide tooltip initialized this way, call tooltip method with hide parameter:

$('body [rel~="tooltip"]').tooltip('hide')

Putting it together

Having tooltip initialized, it is time to attach event handlers. The events we need to take care of are:

mouseenter
hidden.bs.dropdown
shown.bs.dropdown

The resulting code is pretty simple:

var handler = function() {
  return $('body [rel~="tooltip"]').tooltip('hide');
};
$(document).on('mouseenter', '.dropdown-menu', handler);
$(document).on('hidden.bs.dropdown', handler);
$(document).on('shown.bs.dropdown', handler);

Resulting user experience is now proper, the tooltip hides on expected conditions.