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

Elements with thedisabled 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 usingtabindex="0", and override thepointer-events on the disabled element.

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

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