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.
Properties
Section titled "Properties"anchor
Section titled "anchor"An element instance or an IDREF to use as the anchor for the tooltip.
anchor: string | ElementhideDelay
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 separate string of different event triggers.
hideTriggers: stringmessage
Section titled "message"Specifies a plain text as tooltip content.
message: stringoffset
Section titled "offset"The offset of the tooltip from the anchor in pixels.
offset: numberWhether the tooltip is showing.
open: booleanplacement
Section titled "placement"Where to place the floating element relative to the parent anchor element.
placement: PopoverPlacementshowDelay
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 separate 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>