In the following example you can see the button that will trigger the tooltip element to be shown when hovered or focused.
Things to know when using the tooltip plugin:
- Tooltips are opt-in for performance reasons, so you must initialize them yourself.
- Tooltips with zero-length titles are never displayed.
- Triggering tooltips on hidden elements will not work.
disabledelements must be triggered on a wrapper element.
When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
whitespace-nowrapclass on your
<a>tags or elements to avoid this behavior.
- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
- Tooltips can be triggered thanks to an element inside a shadow DOM.
Help us spread the word about Tailwind Elements for React (TER)
If you enjoy the project, help it grow & find more contributors by sharing it with your peers. Every share counts, thank you!
Hover over the buttons below to see the four tooltips directions:
top, right, bottom, left.
Check API Properties to see all available options.
And with custom HTML added:
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
ideally made keyboard-focusable using
pointer-events on the disabled element.
If you are looking for more advanced options, try Bootstrap Tooltip from MDBootstrap.