Overlay Components
Popovers, tooltips, dropdowns, and overlay panels
Components for overlays and floating UI elements.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
Popover
Popover Root - Container for a single popover
agent-ready
SimplePopover
One-line convenience wrapper that pairs a trigger with floating content — no provider boilerplate.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
trigger | React.ReactNode | ✓ | - | Element that triggers the popover |
content | React.ReactNode | ✓ | - | Popover content |
side | Position | undefined | "bottom" | Position of the popover relative to trigger | |
align | FlexAlign | undefined | "center" | Alignment of the popover | |
sideOffset | number | undefined | 8 | Distance from the trigger in pixels | |
showArrow | boolean | undefined | false | Whether to show the arrow | |
showClose | boolean | undefined | false | Whether to show a close button | |
className | string | undefined | - | Additional class for content | |
open | boolean | undefined | - | Controlled open state | |
onOpenChange | ((open: boolean) => void) | undefined | - | Callback when open state changes |
SimpleTooltip
One-line convenience wrapper around the full <[**Tooltip**](/reference/ui/components/overlays/#tooltip)> primitive set. Pass content (the hover text) and any single React element as children — <[**SimpleTooltip**](/reference/ui/components/overlays/#simpletooltip)> handles the provider, trigger, p…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
content | React.ReactNode | ✓ | - | Tooltip content (string or JSX) |
side | Position | undefined | "top" | Position of the tooltip relative to trigger | |
sideOffset | number | undefined | 8 | Distance from the trigger in pixels | |
delayDuration | number | undefined | 200 | Delay before showing tooltip (ms) | |
showArrow | boolean | undefined | true | Whether to show the arrow | |
className | string | undefined | - | Additional class for content | |
children | React.ReactNode | ✓ | - | Element that triggers the tooltip |
Tooltip
Tooltip Root - Container for a single tooltip
agent-ready