A component that displays information related to an element when the element receives keyboard focus or the mouse hovers over it

Tooltip exports 4 components that combine to create our tooltip. The Tooltip.Trigger requires a React component child (or passed to as) to allow the necessary event bindings and accessible properties to be cloned.

Also, note that the component must accept a ref.

Tooltip.Provider is required to avoid regressions and should be included at the root level of the application.

Read more about the underlying UI component on the Radix UI documentation site.

<Tooltip.Provider>
<Tooltip>
<Tooltip.Trigger>
<Text>Hover on me</Text>
</Tooltip.Trigger>
<Tooltip.Content>This is the tooltip content, hello</Tooltip.Content>
</Tooltip>
</Tooltip.Provider>

API Reference

Tooltip

PropTypeDefaultRequired
open
boolean

-

-

defaultOpen
boolean

-

-

onOpenChange
(open: boolean) => void

-

-

delayDuration
number
350

-

disableHoverableContent
boolean

-

-

Tooltip.Content

PropTypeDefaultRequired
aria-label
string

-

-

asChild
boolean

-

-

side
"bottom" | "left" | "right" | "top"
top

-

sideOffset
number
4

-

align
"center" | "end" | "start"

-

-

alignOffset
number

-

-

arrowPadding
number

-

-

collisionBoundary
null | Element | Boundary[]

-

-

collisionPadding
number | Partial<Record<"bottom" | "left" | "right" | "top", number>>

-

-

sticky
"always" | "partial"

-

-

hideWhenDetached
boolean

-

-

avoidCollisions
boolean

-

-

forceMount
true

-

-

onEscapeKeyDown
(event: KeyboardEvent) => void

-

-

onPointerDownOutside
(event: PointerDownOutsideEvent) => void

-

-

size
"sm" | "md" | "lg"
md

-

cssCSSProperties

-

-