Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. The data-placement attribute specifies the tooltip position.

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabindex="0", and override the pointer-events on the disabled element.

Disabled button

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left Using background colors

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left Using Light background colors

Tooltip on top Tooltip on right Tooltip on bottom Tooltip on left