Useful Components Logo

Component Library

Tooltip

A tooltip is a small pop-up box that appears when a user hovers over an element, providing additional information or context about that element. Tooltips are commonly used in user interfaces to enhance usability and provide guidance to users.

Basic tooltip

You just need to put some texts into "tooltip" and, most of the time, a tooltip entirely made with CSS appears

Element

More develop tooltip

Sometimes, the precedent solution is not working due to CSS (skill) issues or want more control over the tooltip. Then, you have a more advanced solution with a little bit of custom code. You can use the "useTooltip" hook to create a tooltip with more control over its behavior and appearance.

Delay

You can also add a delay to the tooltip, so it will appear after a certain amount of time. This can be useful to avoid showing the tooltip too quickly and annoying the user.