Tooltip API

API reference docs for theTooltipcomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

PropsTypeDescriptionDefault
children(props: { triggerProps: TooltipTriggerProps<React.ElementType>}) => React.ReactNodeThe child element that the tooltip will wrap, such as a button or other interactive element._
contentstringThe text or content that will be displayed inside the tooltip._

id?

string

An optional ID for the tooltip.

If no value is provided, an ID will be automatically generated

_

maxWidth?numberThe maximum width of the popover.200

placement?

'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'

Internally imports type Placement from @floating-ui/react-dom

Defines the tooltip's placement relative to the trigger element.

top

shouldUsePortal?booleanWhether the tooltip should be placed within a React Portal.true

strategy?

'absolute' | 'fixed'

Internally imports type Strategy from @floating-ui/react-dom

The strategy used to position the floating element.

absolute

visibilityHidden?booleanControls the visibility of tooltip. When set to true tooltip will not render and removes all events in trigger elementfalse