Overlay
Popovers, tooltips, dropdowns, and overlay panels
Components for overlays and floating UI elements.
Prerequisites
- Complete the installation
- Add the dependency to your app's
package.json
{
"dependencies": {
"@tetherto/mdk-react-devkit": "*",
"@tetherto/mdk-react-adapter": "*",
"@tetherto/mdk-ui-foundation": "*"
}
}Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
@tetherto/mdk-react-devkit
Import the public APIs on this page from @tetherto/mdk-react-devkit.
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 | Status | Type / Options | Default | Description |
|---|---|---|---|---|
content | Required | React.ReactNode | - | Popover content |
trigger | Required | React.ReactNode | - | Element that triggers the popover |
align | Optional | "center" | "start" | "end" | "center" | Alignment of the popover |
className | Optional | string | - | Additional class for content |
onOpenChange | Optional | ((open: boolean) => void) | - | Callback when open state changes |
open | Optional | boolean | - | Controlled open state |
showArrow | Optional | boolean | false | Whether to show the arrow |
showClose | Optional | boolean | false | Whether to show a close button |
side | Optional | "left" | "right" | "top" | "bottom" | "bottom" | Position of the popover relative to trigger |
sideOffset | Optional | number | 8 | Distance from the trigger in pixels |
SimpleTooltip
One-line convenience wrapper around the full <Tooltip> primitive set. Pass content (the hover text) and any single React element as children — <SimpleTooltip> handles the provider, trigger, portal and content for you. Prefer this over composing <Tooltip> + <TooltipTrigger> + <TooltipContent> unless you need custom positioning or async content
agent-ready
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
children | Required | React.ReactNode | - | Element that triggers the tooltip |
content | Required | React.ReactNode | - | Tooltip content (string or JSX) |
className | Optional | string | - | Additional class for content |
delayDuration | Optional | number | 200 | Delay before showing tooltip (ms) |
showArrow | Optional | boolean | true | Whether to show the arrow |
side | Optional | "left" | "right" | "top" | "bottom" | "top" | Position of the tooltip relative to trigger |
sideOffset | Optional | number | 8 | Distance from the trigger in pixels |
Tooltip
Tooltip Root - Container for a single tooltip
agent-ready