Dev Blog

Tooltip left over dropdown
Tooltip left visible over

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:

  1. Dropdown shown
  2. Dropdown hidden
  3. Mouse entering dropdown menu


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:

        container: 'body',

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:

  1. mouseenter

The resulting code is pretty simple:

var handler = function() {
  return $('body [rel~="tooltip"]').tooltip('hide');
$(document).on('mouseenter', '.dropdown-menu', handler);
$(document).on('', handler);
$(document).on('', handler);
Resulting user experience is now proper, the tooltip hides on expected conditions.