SimplePopover

One-line convenience wrapper that pairs a trigger with floating content — no provider boilerplate.

import { SimplePopover } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`trigger`	Required	`React.ReactNode`	—	Element that triggers the popover
`content`	Required	`React.ReactNode`	—	Popover content
`side`	Optional	`Position \| undefined`	`"bottom"`	Position of the popover relative to trigger
`align`	Optional	`FlexAlign \| undefined`	`"center"`	Alignment of the popover
`sideOffset`	Optional	`number \| undefined`	`8`	Distance from the trigger in pixels
`showArrow`	Optional	`boolean \| undefined`	`false`	Whether to show the arrow
`showClose`	Optional	`boolean \| undefined`	`false`	Whether to show a close button
`className`	Optional	`string \| undefined`	—	Additional class for content
`open`	Optional	`boolean \| undefined`	—	Controlled open state
`onOpenChange`	Optional	`((open: boolean) => void) \| undefined`	—	Callback when open state changes

Usage

Floating panel anchored to a trigger element. Built on Radix UI; use the composable parts for full control, or SimplePopover for the common case.

Composition

<Popover>
  <PopoverTrigger asChild><Button>Open</Button></PopoverTrigger>
  <PopoverContent side="bottom" align="start" showArrow showClose>
    <p>Hello!</p>
  </PopoverContent>
</Popover>

`Popover` (root) props

Prop	Type	Required	Default	Description
`open`	`boolean`	no	—	Controlled open state.
`defaultOpen`	`boolean`	no	`false`	Uncontrolled initial state.
`onOpenChange`	`(open: boolean) => void`	no	—	Open-state change handler.
`modal`	`boolean`	no	`false`	Trap focus inside the panel.

`PopoverContent` props

Prop	Type	Required	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	no	`"bottom"`	Side relative to the trigger.
`align`	`"start" \| "center" \| "end"`	no	`"center"`	Alignment along the side.
`sideOffset`	`number`	no	`8`	Distance from the trigger (px).
`showArrow`	`boolean`	no	`false`	Render a directional arrow.
`showClose`	`boolean`	no	`false`	Render a close (×) button.
`className`	`string`	no	—	Content class names.

Notes

PopoverContent automatically portals to document.body.
For tooltips that appear on hover, use <Tooltip> instead.

Example

/** * Runnable example for Popover. */import { Button, Popover, PopoverContent, PopoverTrigger } from '@tetherto/mdk-react-devkit'export const PopoverExample = () => {  return (    <Popover>      <PopoverTrigger asChild>        <Button>Filters</Button>      </PopoverTrigger>      <PopoverContent side="bottom" align="start" showArrow showClose>        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 220 }}>          <strong>Filter by</strong>          <p style={{ margin: 0 }}>Place your filter form here.</p>        </div>      </PopoverContent>    </Popover>  )}