Tooltip - Keep React
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
Property | Description | Type | Default |
---|---|---|---|
placement | Placement of the tooltip. | top bottom left right top-start top-end right-start right-end bottom-start bottom-end left-start left-end | top |
trigger | Trigger 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.