Help

Tooltip

A component that displays a pop-up with additional information when hovering over or focusing on an element.

In this guide, you'll learn how to use the Tooltip component.

Was this example helpful?

Usage#

Code
import { Tooltip } from "@medusajs/ui"

Code
<Tooltip content="Tooltip content">Trigger</Tooltip>

API Reference#

This component is based on the Radix UI Tooltip primitive.

Prop	Type	Default
`content`	`ReactNode`	-
`onClick`	`MouseEventHandler`	-
`side`	`"bottom"` \|`"left"` \|`"top"` \|`"right"`	`top`
`maxWidth`	`number`	`220`
`sideOffset`	`number`	`8`
`children`		-
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`function`	-
`delayDuration`	`number`	-

Was this helpful?

Usage Outside Medusa Admin with TooltipProvider#

If you're using the Tooltip component in a project other than the Medusa Admin, make sure to include the TooltipProvider somewhere up in your component tree:

Code
1<TooltipProvider>2  <Tooltip content="Tooltip content">Trigger</Tooltip>3</TooltipProvider>

TooltipProvider Reference#

Prop	Type	Default
`delayDuration`	`number`	`100`
`skipDelayDuration`	`number`	`300`
`disableHoverableContent`	`boolean`	-

Was this helpful?

Examples#