- Components
- Tooltip
Overlays
Tailwind CSS Tooltip
Use Tailwind CSS tooltips, floating non-actionable labels that explain interface elements or features, to improve user experience and navigation.
Requires JS
Note that this component requires the use of the third-party Popper.js plugin, else you can skip this message if you are already using Preline UI as a package.
When to use
Tooltip are meant to be exactly that, a hint or tip on what a tool or other interaction does. They are meant to clarify or help you use the content that they hover over, not add additional content:
Since tooltip are only meant to tell the purpose of an element they should be short and to the point "Click X to do X" or "User post count"
Interactions
Tooltip are typically only visible on hover, for that reason if you need to be able to read the content while interacting with other parts of the page then a tooltip will not work.
Conclusion
If you want to give a small few word hint on how or what an element on the page does use a tooltip.
Although it should be noted due to accessibility problems, potential SEO issues, and lack of discovery of the tooltip, it's not recommended unless you absolutely need it.
Example
Hover over the buttons below to see the four tooltip directions: top, right, bottom, and left.
