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 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

titleTitle of the tooltip.stringTooltip Text
childrenChild elements to trigger the tooltip.ReactNode<Button/>
contentContent of the tooltip.ReactNodeText
placementPlacement of the tooltip.
triggerTrigger mode for displaying the tooltip.
styleStyle of the tooltip.
animationAnimation duration class for the tooltip.false | `duration-${number}`false
arrowShow or hide the tooltip arrow sign.booleantrue


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