Tooltip - Keep React
Table of Contents#
- Default Tooltip
- Tooltip Styles
- Tooltip Placement
- Tooltip Trigger
- Tooltip With Large Text
- API Reference
- Reference
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 Styles#
The Keep React offers two distinct styles for tooltips: light and dark. To apply the dark style, simply use the style="dark" attribute when implementing the tooltip. By default, tooltips will adopt the dark style. This flexibility allows you to seamlessly integrate tooltips that align with your design theme.
Tooltip Placement#
You can choose from four placement options: top, bottom, left, and right. This flexibility allows you to enhance user interactions by offering relevant information in a visually intuitive manner. To set the placement of a tooltip, use the placement prop with the desired value, such as placement="top".
Tooltip Trigger#
Tooltips within the Keep React can be triggered using two different methods: hover and click. You can choose the trigger that best suits your user experience and interaction design. By default, tooltips are triggered on hover, providing users with instant context when they hover over a specific element. Alternatively, you can opt for a click trigger. If you want to use the click trigger, simply include the trigger prop with the value click in your tooltip component. For example, trigger="click".
Tooltip With Large Text#
The tooltip's content prop contains longer text content, and the title and other attributes are set as previously specified. Feel free to adjust the text content and other attributes as needed for your application's context.
API Reference#
Explore the available props for the tooltip component
| Property | Description | Type | Default |
|---|---|---|---|
| title | Title of the tooltip. | string | Tooltip Text |
| children | Child elements to trigger the tooltip. | ReactNode | <Button/> |
| content | Content of the tooltip. | ReactNode | Text |
| placement | Placement of the tooltip. | top bottom left right | top |
| trigger | Trigger mode for displaying the tooltip. | hover click | hover |
| style | Style of the tooltip. | dark light | dark |
| animation | Animation duration class for the tooltip. | false | `duration-${number}` | false |
| arrow | Show or hide the tooltip arrow sign. | boolean | true |
Reference#
Our Tooltip component is built using the @floating-ui package. For more information , follow the documentation @floating-ui.