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 the disabledattribute 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-eventson 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