Provides a way to display supplementary information related to an element when a user interacts with it (e.g., hover, focus). It offers features such as placement customization, delays, sticky mode, and animations.

  • Default slot of the tooltip component.

close-button - Slot for custom sticky-mode close action (e.g., an icon/button).

base - The wrapping container of the tooltip content.

Callable

  • Returns ReactNode

Events

onClosed: (args: CustomEvent<void>) => void

Emitted after the tooltip has been fully removed from view.

Type declaration

onClosing: (args: CustomEvent<void>) => void

Emitted before the tooltip begins to close. Can be canceled to prevent closing.

Type declaration

onOpened: (args: CustomEvent<void>) => void

Emitted after the tooltip has successfully opened and is visible.

Type declaration

onOpening: (args: CustomEvent<void>) => void

Emitted before the tooltip begins to open. Can be canceled to prevent opening.

Type declaration

Methods

  • Hides the tooltip if not already hidden.

    Returns Promise<boolean>

  • Shows the tooltip if not already showing. If a target is provided, sets it as a transient anchor.

    Parameters

    • target: string | Element

    Returns Promise<boolean>

  • Toggles the tooltip between shown/hidden state

    Returns Promise<boolean>

Properties

anchor: string | Element

An element instance or an IDREF to use as the anchor for the tooltip.

disableArrow: boolean

Whether to disable the rendering of the arrow indicator for the tooltip.

hideDelay: number

Specifies the number of milliseconds that should pass before hiding the tooltip.

hideTriggers: string

Which event triggers will hide the tooltip. Expects a comma separate string of different event triggers.

message: string

Specifies a plain text as tooltip content.

offset: number

The offset of the tooltip from the anchor in pixels.

open: boolean

Whether the tooltip is showing.

placement: PopoverPlacement

Where to place the floating element relative to the parent anchor element.

showDelay: number

Specifies the number of milliseconds that should pass before showing the tooltip.

showTriggers: string

Which event triggers will show the tooltip. Expects a comma separate string of different event triggers.

sticky: boolean

Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.

withArrow: boolean

Whether to render an arrow indicator for the tooltip.