Tooltip

Radix Tooltip with a small sketch bubble. Wrap the app in TooltipProvider once (the docs site already does).

Roughness1.5Lock seed

<Tooltip content="A small sketch bubble" roughness={1.5}>
  <Button variant="outline">Hover me</Button>
</Tooltip>

Usage

import { Tooltip, TooltipProvider, Button } from "doodleui-react";

<TooltipProvider>
  <Tooltip content="A small sketch bubble">
    <Button variant="outline">Hover me</Button>
  </Tooltip>
</TooltipProvider>

The trigger must accept a ref. Native elements and doodle-ui buttons both work. If you pass a custom component, wrap it with forwardRef.

Props

Prop	Type	Default	Notes
content	ReactNode	required	Bubble body.
side	"top" \| "right" \| "bottom" \| "left"	"top"	Radix placement.
delayDuration	number	200	Hover delay in milliseconds.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.