Tooltip

Usage

For a quick usage, use the Tooltip component directly.

import { Tooltip } from "@lemonsqueezy/wedges";

<Tooltip content="Tooltip Content" />

For more advanced usage, inner components are exported from the Tooltip component.

<Tooltip.Provider>
  <Tooltip.Root>
    <Tooltip.Trigger />
    <Tooltip.Portal>
      <Tooltip.Content>
        <Tooltip.Arrow />
      </Tooltip.Content>
    </Tooltip.Portal>
  </Tooltip.Root>
</Tooltip.Provider>

API Reference

Use this component for a quick usage.

Prop	Value	Default
`align`	`"start" \| "center" \| "end"`	`"center"`
`alignOffset`	`number`	`-12`
`animation`	`boolean`	`true`
`arrow`	`boolean`	`true`
`arrowPadding`	`"number"`	`0`
`asChild`	`boolean`	`false`
`avoidCollisions`	`boolean`	`true`
`children`	`ReactNode`	/
`collisionBoundary`	`"Element" \| "null" \| "Array<Element \| null>"`	`[]`
`collisionPadding`	`"number" \| "Partial<Record<Side, number>>"`	`0`
`color`	`"primary" \| "secondary" \| "soft"`	`"primary"`
`content`	`ReactNode`	/
`defaultOpen`	`boolean`	/
`delayDuration`	`number`	`200`
`delayDuration`	`number`	/
`disableHoverableContent`	`boolean`	`false`
`forceMount`	`boolean`	/
`hideWhenDetached`	`boolean`	`false`
`onEscapeKeyDown`	`function`	/
`onOpenChange`	`function`	/
`onOpenChange`	`function`	/
`onPointerDownOutside`	`function`	/
`open`	`boolean`	/
`open`	`boolean`	/
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`
`sideOffset`	`number`	`2`
`size`	`"sm" \| "md"`	`"sm"`
`sticky`	`"partial" \| "always"`	`"partial"`

Tooltip.Provider

Extends the Radix Tooltip Provider primitive with custom configuration.

Tooltip.Root

Extends the Radix Tooltip Root primitive with custom configuration.

Tooltip.Trigger

Extends the Radix Tooltip Trigger primitive with custom styling.

Tooltip.Arrow

Extends the Radix Tooltip Arrow primitive with custom styling.

Tooltip.Content

Extends the Radix Tooltip Content primitive with custom styling.

Tooltip.Portal

Exports the Radix Tooltip Portal primitive.

Examples

The example below displays all possible combinations of positions and alignments available for the Tooltip component.

The example below demonstrates different color and size variations of the Tooltip component.

Wedges