### Tooltip

##### Tooltips on links

Hover over the links below to see tooltips.

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.

##### Disabled Elements

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.

##### Hover Elements

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.

##### Directions

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

##### HTML Tags

And with custom HTML added:

##### Color Tooltips

We set a custom class with ex. `data-bs-custom-class="primary-tooltip"` to scope our background-color primary appearance and use it to override a local CSS variable.