Tooltip

An overlay component displaying brief hints or string text descriptions over focused interactive items.
For more information on this component configuration, visit Radix UI

Placement

Use the side prop on the Tooltip.Content to set the placement of the component. Values can include top, right, bottom, left.

Sizes

Use the tooltip-content-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-tooltip-z-index: 60;
 
  --ex-tooltip-font-family: var(--font-sans);
  --ex-tooltip-font-weight: var(--font-weight-normal);
 
  --ex-tooltip-font-size-sm: var(--text-xs);
  --ex-tooltip-font-size-md: var(--text-sm);
 
  --ex-tooltip-max-w-sm: var(--container-3xs);
  --ex-tooltip-max-w-md: var(--container-2xs);
 
  --ex-tooltip-gap-sm: calc(var(--spacing) * 0.75);
  --ex-tooltip-gap-md: calc(var(--spacing) * 1);
 
  --ex-tooltip-px-sm: calc(var(--spacing) * 1.5);
  --ex-tooltip-px-md: calc(var(--spacing) * 2);
 
  --ex-tooltip-py-sm: calc(var(--spacing) * 0.5);
  --ex-tooltip-py-md: calc(var(--spacing) * 1);
 
  --ex-tooltip-radius-sm: var(--radius-sm);
  --ex-tooltip-radius-md: var(--radius-sm);
 
  --ex-tooltip-shadow-sm: var(--shadow-sm);
  --ex-tooltip-shadow-md: var(--shadow-sm);
 
  --ex-tooltip-arrow-height-sm: calc(var(--spacing) * 1.5);
  --ex-tooltip-arrow-height-md: calc(var(--spacing) * 1.5);
 
  --ex-tooltip-arrow-width-sm: calc(var(--spacing) * 3);
  --ex-tooltip-arrow-width-md: calc(var(--spacing) * 3);
}

API

For more information on this component configuration, visit Radix UI

Prop	Type	Default
`delayDuration`	`number`	`700`
`skipDelayDuration`	`number`	`300`
`disableHoverableContent`	`boolean`	`false`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`delayDuration`	`number`	`700`
`disableHoverableContent`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`function`

Tooltip Trigger

Element	Selector
`Tooltip.Trigger`	`.ex-tooltip-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Element	Selector
`Tooltip.Content`	`.ex-tooltip-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`align`	`enum of ["start", "center", "end"]`	`center`
`alignOffset`	`number`	`0`
`arrowPadding`	`number`	`0`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`side`	`enum of ["top", "right", "bottom", "left"]`	`bottom`
`sideOffset`	`number`	`0`
`sticky`	`enum of ["always", "partial"]`	`partial`

Element	Selector
`Tooltip.Arrow`	`.ex-tooltip-arrow`

Prop	Type	Default
`asChild`	`boolean`	`false`

Tooltip

Placement

Sizes

Customizing

API

Tooltip Provider

Tooltip

Tooltip Trigger

Tooltip Portal

Tooltip Content

Tooltip Arrow