Tooltip
Tooltip Root - Container for a single tooltip
Tooltip Root - Container for a single tooltip
import { Tooltip } from "@tetherto/mdk-react-devkit";Tooltip exposes no documented props.
Usage
Hover-triggered floating label built on Radix UI. Two ways to use it:
SimpleTooltip— one-prop wrapper, recommended for most cases.Tooltip+ sub-parts — full composition for advanced control.
SimpleTooltip props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
content | ReactNode | yes | — | Tooltip body (string or JSX). |
children | ReactNode | yes | — | Trigger element (any focusable node). |
side | "top" | "right" | "bottom" | "left" | no | "top" | Side relative to trigger. |
sideOffset | number | no | 8 | Distance from the trigger (px). |
delayDuration | number | no | 200 | Hover delay before showing (ms). |
showArrow | boolean | no | true | Render a directional arrow. |
className | string | no | — | Content class names. |
Composable parts
<TooltipProvider delayDuration={200}>
<Tooltip>
<TooltipTrigger asChild><InfoIcon /></TooltipTrigger>
<TooltipContent side="right">Helpful explanation</TooltipContent>
</Tooltip>
</TooltipProvider>
Notes
- For click-triggered panels, use
Popoverinstead. - If
contentis empty/null,SimpleTooltiprenders the trigger unwrapped. - Wrap your app in a single
<TooltipProvider>when you have many tooltips to share the open/close timing logic.
Example
/** * Runnable example for Tooltip / SimpleTooltip. */import { Button, SimpleTooltip } from '@tetherto/mdk-react-devkit'export const TooltipExample = () => { return ( <div style={{ display: 'flex', gap: 16 }}> <SimpleTooltip content="Refresh data" side="bottom"> <Button>Refresh</Button> </SimpleTooltip> <SimpleTooltip content="Saves to the current workspace" side="right"> <Button variant="primary">Save</Button> </SimpleTooltip> </div> )}