Tooltip
The Tooltip component in this UI library is a versatile and customizable tool for providing contextual information when users hover over or focus on an element. It supports various positions relative to the target element, including top, bottom, left, and right, ensuring that the tooltip is displayed in the most convenient location. Additionally, it offers size and variant options, allowing for further customization to match different design needs. The Tooltip component is perfect for enhancing user experience by offering immediate insights without cluttering the interface.
Basic Tooltip
Tooltip API Reference
Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | - |
text* | string | - |
className | string | - |
position | string | top |
variant | string | default |
size | string | default |
rounded | string | full |
* Required | ||
Prop | Types |
|---|---|
size | default small large |
rounded | full small medium large |
variant | default secondary |
position | top bottom left right |
Tooltip - Sizes
1<Tooltip text={"Small"} position="top" size="small">
2 <Button>
3 <p>Small</p>
4 </Button>
5</Tooltip>
6<Tooltip text={"Default"} position="top" size="default">
7 <Button>
8 <p>Default</p>
9 </Button>
10</Tooltip>
11<Tooltip text={"Large"} position="top" size="large">
12 <Button>
13 <p>Large</p>
14 </Button>
15</Tooltip>Tooltip - Position
1<Tooltip text={"Tooltip"} position="top">
2 <IconButton>
3 <ChevronUpIcon />
4 </IconButton>
5</Tooltip>
6<Tooltip text={"Tooltip"} position="bottom">
7 <IconButton>
8 <ChevronDownIcon />
9 </IconButton>
10</Tooltip>
11<Tooltip text={"Tooltip"} position="left">
12 <IconButton>
13 <ChevronLeftIcon />
14 </IconButton>
15</Tooltip>
16<Tooltip text={"Tooltip"} position="right">
17 <IconButton>
18 <ChevronRightIcon />
19 </IconButton>
20</Tooltip>