Tooltip
The <Tooltip> components allows to provide additional information to that user. For that the <Tooltip> is divided into a <Tooltip.Trigger> and the <Tooltip> itself. You need to wrap the trigger around the <Tooltip> and a simple button, which is necessary for handle actions.
You should use the <Tooltip> if you want to show helpful, short information to the user.
Usage
To import the component you just have to use this code below.
import { Tooltip } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Trigger Props
| Property | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables the tooltip. |
delay | number | 1000 | Sets the delay with which the tooltip should appear. |
trigger | focus | undefined | Sets the trigger behavior of the tooltip. Can be switched to just focus. |
open | boolean | undefined | Sets the open state of the tooltip. |
onOpenChange | function | none | Handles the the open state of the tooltip. |
closeDelay | number | 500 | The delay time for the tooltip to close. |
Tooltip Props
| Property | Type | Default | Description |
|---|---|---|---|
offset | number | none | Sets the offset of the tooltip. |
crossOffset | number | none | Sets the crossOffset of the tooltip. |
placement | top, bottom, left, right | top | Sets the placement of the tooltip |
shouldFlip | boolean | top | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
Examples
Default Tooltip
Here you can see a simple <Tooltip> use case. You can hover or tab the button to see the tooltip message.
Tooltip with custom placement
In this example the placement of the <Tooltip> is set to the right. By default it is set to the top. If there isn't enough space for the placement it moves to the bottom.
Tooltip only shows when focused
You can use the property trigger to the <Tooltip.Trigger> and setting it to focus. With that you can't hover it anymore, you have to tab in with the keyboard.
Controlled Tooltip
The open state of the tooltip can be controlled via the open and onOpenChange props.