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.
Element
igc-tooltip
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"

Optional anchor

Section titled "anchor"

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

 
anchor: string | Element

Defined in src/components/tooltip/tooltip.ts:188

Remarks

Trying to bind to an IDREF that does not exist in the current DOM root at will not work. In such scenarios, it is better to get a DOM reference and pass it to the tooltip instance.

message

Section titled "message"

Specifies a plain text as tooltip content.

 
message: string = ''

Defined in src/components/tooltip/tooltip.ts:258

offset

Section titled "offset"

The offset of the tooltip from the anchor in pixels.

 
offset: number = 6

Defined in src/components/tooltip/tooltip.ts:167

placement

Section titled "placement"

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

 
placement: PopoverPlacement = 'bottom'

Defined in src/components/tooltip/tooltip.ts:176

sticky

Section titled "sticky"

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

 
sticky: boolean = false

Defined in src/components/tooltip/tooltip.ts:267

withArrow

Section titled "withArrow"

Whether to render an arrow indicator for the tooltip.

 
withArrow: boolean = false

Defined in src/components/tooltip/tooltip.ts:158

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-tooltip" = 'igc-tooltip'

Defined in src/components/tooltip/tooltip.ts:59

Methods

Section titled "Methods"

hide

Section titled "hide"

Hides the tooltip if not already hidden.

hide(): Promise<boolean>

Defined in src/components/tooltip/tooltip.ts:364

Returns Promise<boolean>

show

Section titled "show"

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

show(target: string | Element): Promise<boolean>

Defined in src/components/tooltip/tooltip.ts:354

Parameters

  • target: string | Element

Returns Promise<boolean>

toggle

Section titled "toggle"

Toggles the tooltip between shown/hidden state

toggle(): Promise<boolean>

Defined in src/components/tooltip/tooltip.ts:369

Returns Promise<boolean>