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.
close-button — The default sticky-mode close button.

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:236

Remarks

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

hideDelay

Section titled "hideDelay"

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

 
hideDelay: number = 300

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

message

Section titled "message"

Specifies plain text as the tooltip content.

 
message: string = ''

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

offset

Section titled "offset"

The offset of the tooltip from the anchor in pixels.

 
offset: number = 6

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

placement

Section titled "placement"

Where to place the tooltip relative to its anchor element.

 
placement: PopoverPlacement = 'bottom'

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

scrollStrategy

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: PopoverScrollStrategy = 'hide'

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

showDelay

Section titled "showDelay"

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

 
showDelay: number = 200

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

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:305

withArrow

Section titled "withArrow"

Whether to render an arrow indicator for the tooltip.

 
withArrow: boolean = false

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

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:69

Accessors

Section titled "Accessors"

hideTriggers

Section titled "hideTriggers" 
get hideTriggers(): any

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

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

 
set hideTriggers(value: string): void

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

Parameters

  • value: string

Returns void

open

Section titled "open" 
get open(): any

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

Whether the tooltip is showing.

 
set open(value: boolean): void

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

Parameters

  • value: boolean

Returns void

showTriggers

Section titled "showTriggers" 
get showTriggers(): any

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

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

 
set showTriggers(value: string): void

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

Parameters

  • value: string

Returns void

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:489

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:473

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:499

Returns Promise<boolean>