bydefaulthuman.fun

Installation

package manager

npx shadcn add https://bydefaulthuman.fun/r/tooltip.json

Props

PropTypeDefaultDescription

children*

ReactNode

—

Content rendered inside the component.

className

string

"relative inline-flex"

Additional Tailwind classes applied to the component.

content*

ReactNode

—

Content rendered inside the overlay.

delayMs

number

400

Delay before the tooltip opens, in milliseconds.

id

string

—

Optional stable id used for sketch seeding and accessibility.

side

TooltipSide

"top"

Preferred side or placement.

theme

CrumbleTheme

—

Overrides the global Crumble theme for this instance.

Sides

Custom delay

Accessibility

Tooltip content is supplemental, not primary. Do not put critical instructions only inside the tooltip, because hover-only disclosure is easy to miss on touch devices and with keyboard navigation.

Examples

import { Tooltip } from "@/components/crumble/ui/tooltip";

<Tooltip content="Save your work">
  <Button>Save</Button>
</Tooltip>;