Tooltip

An unstyled tooltip component with hover/focus triggers, delay management, and group transitions.

Build fully custom tooltips with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Tooltip with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Configurable openDelay and closeDelay for timing control
Manager enables instant transitions when hovering between adjacent tooltips
Interactive popup: hovering the tooltip content keeps it open by default
Arrow element with automatic per-side positioning via CSS custom properties

Usage#

import { Tooltip } from 'primereact/tooltip';

<Tooltip.Manager>
    <Tooltip.Root>
        <Tooltip.Trigger></Tooltip.Trigger>
        <Tooltip.Portal>
            <Tooltip.Positioner>
                <Tooltip.Popup>
                    <Tooltip.Arrow />
                </Tooltip.Popup>
            </Tooltip.Positioner>
        </Tooltip.Portal>
    </Tooltip.Root>
</Tooltip.Manager>

Behavior#

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Tooltip.Trigger as="div">...</Tooltip.Trigger>

Render Function Children#

Sub-components accept a render function as children, providing access to the component instance.

<Tooltip.Trigger>{(instance) => <span>{instance.tooltip?.state.open ? 'Active' : 'Idle'}</span>}</Tooltip.Trigger>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Hover or focus on the flight information to see the status.

/* Select a part to see its CSS selector for custom styling */

API#

TooltipManager#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TooltipManagerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TooltipManagerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TooltipManagerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TooltipManagerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TooltipManagerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`openDelay`	`number`	—
The delay in milliseconds before opening a tooltip.
`closeDelay`	`number`	—
The delay in milliseconds before closing a tooltip.
`timeout`	`number`	`400`
The timeout in milliseconds for the instant phase. If another tooltip opens within this timeout after a tooltip closes, the transition will be instant.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TooltipManager component.

label	type	description
manager	TooltipManagerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the manager's DOM element.

TooltipRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TooltipRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TooltipRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TooltipRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TooltipRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TooltipRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`open`	`boolean`	—
Controls the open state of the tooltip.
`defaultOpen`	`boolean`	`false`
Whether the tooltip is open by default.
`disabled`	`boolean`	`false`
Whether the tooltip is disabled.
`openDelay`	`number`	`600`
The delay in milliseconds before opening the tooltip on hover.
`closeDelay`	`number`	`0`
The delay in milliseconds before closing the tooltip.
`interactive`	`boolean`	`true`
Whether the tooltip popup is interactive (hoverable). When true, hovering over the popup keeps the tooltip open. When false, the tooltip closes as soon as the pointer leaves the trigger.
`onOpenChange`	`(event: TooltipRootChangeEvent) => void`	`undefined`
Callback fired when the tooltip's open state changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-instant`	Instant transition type when applicable

Defines passthrough(pt) options of Tooltip component.

label	type	description
root	TooltipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.
trigger	TooltipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the trigger's DOM element.
portal	TooltipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the portal's DOM element.
positioner	TooltipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the positioner's DOM element.
popup	TooltipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the popup's DOM element.
arrow	TooltipRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the arrow's DOM element.

TooltipTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`(CSSProperties` \| `((instance?: ButtonInstance) => CSSProperties)) & (CSSProperties` \| `((instance?: TooltipTriggerInstance) => CSSProperties))`	—
The style to apply to the component.
`className`	`(string` \| `((instance?: ButtonInstance) => string)) & (string` \| `((instance?: TooltipTriggerInstance) => string))`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BaseInstance<SafeRecord<ButtonProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<ButtonProps>>; attrs: Omit<SafeRecord<SafeRecord<ButtonProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & ButtonExposes & Record<PropertyKey, unknown> & useComponentPTReturnType & useComponentStyleReturnType & BaseInstance<SafeRecord<TooltipTriggerProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<TooltipTriggerProps>>; attrs: Omit<SafeRecord<SafeRecord<TooltipTriggerProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & TooltipTriggerExposes`	—
The instance to pass to the component.
`pt`	`ButtonPassThrough & Record<PropertyKey, unknown> & TooltipTriggerPassThrough`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: ButtonInstance) => ReactNode & (instance: TooltipTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`size`	`"small"` \| `"large"` \| `"normal"`	—
Size of the Button.
`severity`	`string & {}` \| `"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"` \| `"help"`	—
Severity type of the Button.
`variant`	`"link"` \| `"text"` \| `"outlined"`	—
Variant of the Button.
`plain`	`boolean`	—
Whether to show the Button with a plain style.
`rounded`	`boolean`	—
Whether to show the Button with a rounded style.
`raised`	`boolean`	—
Whether to show the Button with a raised style.
`iconOnly`	`boolean`	—
Whether to show the Button with a borderless style.
`fluid`	`boolean`	—
Whether to show the Button with a fluid width.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-popup-open`	Present when tooltip is open

Defines passthrough(pt) options of TooltipTrigger component.

label	type	description
root	TooltipTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

TooltipPortal#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`(CSSProperties` \| `((instance?: PortalInstance) => CSSProperties)) & (CSSProperties` \| `((instance?: TooltipPortalInstance) => CSSProperties))`	—
The style to apply to the component.
`className`	`(string` \| `((instance?: PortalInstance) => string)) & (string` \| `((instance?: TooltipPortalInstance) => string))`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`BaseInstance<SafeRecord<PortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<PortalProps>>; attrs: Omit<SafeRecord<SafeRecord<PortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & PortalExposes & Record<PropertyKey, unknown> & useComponentPTReturnType & useComponentStyleReturnType & BaseInstance<SafeRecord<TooltipPortalProps>, unknown, HTMLElement> & { props: SafeRecord<SafeRecord<TooltipPortalProps>>; attrs: Omit<SafeRecord<SafeRecord<TooltipPortalProps>>, string` \| `number` \| `symbol> & Record<PropertyKey, unknown> } & { state: SafeRecord; $computedSetup: SafeRecord } & TooltipPortalExposes`	—
The instance to pass to the component.
`pt`	`PortalPassThrough & Record<PropertyKey, unknown> & TooltipPortalPassThrough`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: PortalInstance) => ReactNode & (instance: TooltipPortalInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`onMounted`	`() => void`	—
Callback function to invoke when the portal is mounted.
`onUnmounted`	`() => void`	—
Callback function to invoke when the portal is unmounted.
`element`	`HTMLElement` \| `ReactNode`	—
The element to be rendered as the portal.
`elementRef`	`RefObject<HTMLElement>`	—
The element reference to be rendered as the portal.
`appendTo`	`string` \| `HTMLElement` \| `((instance: PortalInstance) => HTMLElement)`	`'body'`
The DOM element where the portal should be appended to.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of TooltipPortal component.

label	type	description
root	TooltipPortalPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TooltipPositioner#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TooltipPositionerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TooltipPositionerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TooltipPositionerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TooltipPositionerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TooltipPositionerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`side`	`SideType`	—
The side of the positioner.
`align`	`AlignType`	—
The align of the positioner.
`sideOffset`	`number`	—
The side offset of the positioner.
`alignOffset`	`number`	—
The align offset of the positioner.
`flip`	`boolean`	—
Whether to flip the positioner.
`shift`	`boolean`	—
Whether to shift the positioner.
`hideWhenDetached`	`boolean`	—
Whether to hide the positioner when detached.
`strategy`	`"fixed"` \| `"absolute"`	`'fixed'`
The positioning strategy.
`boundary`	`HTMLElement`	—
The boundary element that constrains the positioner placement. Used in JS fallback mode only; CSS Anchor mode uses the containing block.
`anchor`	`HTMLElement`	—
The anchor element.
`content`	`HTMLDivElement`	—
The content element.
`arrow`	`HTMLDivElement`	—
The arrow element.
`autoZIndex`	`boolean`	`true`
Whether to automatically manage layering.
`baseZIndex`	`number`	`0`
Base zIndex value to use in layering.
`onPlacementChange`	`(placement: { side: SideType; align: AlignType }) => void`	—
Callback invoked when the actual placement changes due to flip or shift.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when tooltip is open
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment

CSS Custom Properties

The positioner element exposes CSS custom properties for layout and transform control.

CSS Variable	Description
`--available-height`	Available vertical space in pixels
`--available-width`	Available horizontal space in pixels
`--transform-origin`	Computed transform origin for animations
`--positioner-anchor-width`	Width of the anchor/trigger element

Defines passthrough(pt) options of TooltipPositioner component.

label	type	description
root	TooltipPositionerPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

TooltipPopup#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TooltipPopupInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TooltipPopupInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TooltipPopupInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TooltipPopupPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TooltipPopupInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when tooltip is visible
`data-instant`	Present when an instant transition occurs
`data-instant-type`	`'delay'`, `'focus'`, or `'dismiss'`

Defines passthrough(pt) options of TooltipPopup component.

label	type	description
root	TooltipPopupPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

TooltipArrow#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TooltipArrowInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TooltipArrowInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TooltipArrowInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TooltipArrowPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TooltipArrowInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-open`	Present when tooltip is visible
`data-instant`	Instant transition type when applicable
`data-side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"` — placement
`data-align`	`"start"` \| `"center"` \| `"end"` — alignment