W006

W006

Tooltips and popovers on disabled elements cannot be triggered by user interaction unless the element becomes enabled. To have tooltips and popovers be triggerable by the user even when their associated element is disabled, put the disabled element inside a wrapper <div> and apply the tooltip or popover to the wrapper <div> instead.

Browsers don't fire mouse events on disabled elements, so (by default) user interaction with disabled elements won't trigger their associated tooltips or popovers. Reenabling an element will allow mouse events to be fired on it again. Often, this behavior is desirable, hence why this is only an informative lint warning and not a lint error.

However, if you need to place a triggerable tooltip or popover on a disabled element, one workaround is to wrap the disabled element in a non-disabled element (typically a <div>) and place the tooltip or popover on the wrapper element instead.

Example:

<button disabled type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Revised example using the workaround:

<div data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  <button disabled type="button" class="btn btn-default">Tooltip on right</button>
</div>