SimpleTooltip

One-line convenience wrapper around the full `Tooltip` primitive set. Pass `content` (the hover text) and any single React element as `children` — `SimpleToo…

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.

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

Prop	Status	Type	Default	Description
`content`	Required	`React.ReactNode`	—	Tooltip content (string or JSX)
`side`	Optional	`Position \| undefined`	`"top"`	Position of the tooltip relative to trigger
`sideOffset`	Optional	`number \| undefined`	`8`	Distance from the trigger in pixels
`delayDuration`	Optional	`number \| undefined`	`200`	Delay before showing tooltip (ms)
`showArrow`	Optional	`boolean \| undefined`	`true`	Whether to show the arrow
`className`	Optional	`string \| undefined`	—	Additional class for content
`children`	Required	`React.ReactNode`	—	Element that triggers the tooltip

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 Popover instead.
If content is empty/null, SimpleTooltip renders 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>  )}