Tooltip - Keep React

The Tooltips component in the Keep React allows you to provide additional information or context to users when they hover over or interact with specific elements. With customizable options for type, theme, and arrow placement, you can create versatile tooltips that fit your design needs.

Table of Contents#

Default Tooltip#

Tooltips appear on hover over an element and help convey concise explanations, tips, or labels. By using the Default Tooltip, you can enhance user understanding and improve the overall usability of your interface.

Tooltip Placement#

To set the placement of a tooltip, use the placement prop with the desired value, such as placement="top".

Tooltip With Large Text#

Feel free to adjust the text content and other attributes as needed for your application's context.

Tooltip Trigger#

Tooltips within the Keep React can be triggered using three different methods: hover, click and focus. You can choose the trigger that best suits your user experience and interaction design.

API Reference#

Explore the available props for the tooltip component

PropertyDescriptionTypeDefault
placementPlacement of the tooltip.
top
bottom
left
right
top-start
top-end
right-start
right-end
bottom-start
bottom-end
left-start
left-end
top
triggerTrigger mode for displaying the tooltip.
hover
click
focus
hover

Reference#

Our Tooltip component is built using the @floating-ui package. For more information , follow the documentation @floating-ui.