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.
- Slots
-
default— Default slot of the tooltip component. -
close-button— Slot for custom sticky-mode close action (e.g., an icon/button).
- CSS Parts
-
base— The wrapping container of the tooltip content. -
simple-text— The container where the message property of the tooltip is rendered. -
close-button— The default sticky-mode close button.
Properties
Section titled "Properties"anchor
Section titled "anchor"An element instance or an IDREF to use as the anchor for the tooltip.
anchor: string | Element | undefinedhideDelay
Section titled "hideDelay"Specifies the number of milliseconds that should pass before hiding the tooltip.
hideDelay: numberhideTriggers
Section titled "hideTriggers"Which event triggers will hide the tooltip. Expects a comma separated string of different event triggers.
hideTriggers: stringplacement
Section titled "placement"Where to place the tooltip relative to its anchor element.
placement: PopoverPlacementscrollStrategy
Section titled "scrollStrategy"Sets the behavior of the tooltip when the parent container scrolls.
If the value is hide, the tooltip hides while the anchor is fully out
of view. hide is the default value.
If the value is scroll, the tooltip stays visible and anchored.
If the value is close, the tooltip closes on each scroll. The tooltip
also closes if you set the sticky property. The Escape key behaves the
same way.
scrollStrategy: PopoverScrollStrategyshowDelay
Section titled "showDelay"Specifies the number of milliseconds that should pass before showing the tooltip.
showDelay: numbershowTriggers
Section titled "showTriggers"Which event triggers will show the tooltip. Expects a comma separated string of different event triggers.
showTriggers: stringsticky
Section titled "sticky"Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
sticky: booleanwithArrow
Section titled "withArrow"Whether to render an arrow indicator for the tooltip.
withArrow: booleanMethods
Section titled "Methods"Hides the tooltip if not already hidden.
hide(): Promise<boolean>Returns Promise<boolean>
Shows the tooltip if not already showing. If a target is provided, sets it as a transient anchor.
show(target: string | Element): Promise<boolean>Parameters
- target:
string | Element
Returns Promise<boolean>
toggle
Section titled "toggle"Toggles the tooltip between shown/hidden state.
toggle(): Promise<boolean>Returns Promise<boolean>
Events
Section titled "Events"onClosed
Section titled "onClosed"Emitted after the tooltip has been fully removed from view.
onClosed(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onClosing
Section titled "onClosing"Emitted before the tooltip begins to close. Can be canceled to prevent closing.
onClosing(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpened
Section titled "onOpened"Emitted after the tooltip has successfully opened and is visible.
onOpened(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>
Returns void
onOpening
Section titled "onOpening"Emitted before the tooltip begins to open. Can be canceled to prevent opening.
onOpening(args: CustomEvent<void>): voidParameters
- args:
CustomEvent<void>