IgcTooltipComponent

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.

Constructors

new IgcTooltipComponent(): IgcTooltipComponent

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

Returns IgcTooltipComponent

Properties

Optional 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

Specifies a plain text as tooltip content.

message: string = ''

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

offset

The offset of the tooltip from the anchor in pixels.

offset: number = 6

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

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

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

Whether to render an arrow indicator for the tooltip.

withArrow: boolean = false

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

styles

styles: CSSResult[]

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

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

Accessors

hideDelay

get hideDelay(): number

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

Returns number

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

set hideDelay(value: number): void

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

Parameters

value: number

Returns void

hideTriggers

get hideTriggers(): string

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

Returns string

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

set hideTriggers(value: string): void

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

Parameters

value: string

Returns void

open

get open(): boolean

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

Returns boolean

Whether the tooltip is showing.

set open(value: boolean): void

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

Parameters

value: boolean

Returns void

showDelay

get showDelay(): number

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

Returns number

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

set showDelay(value: number): void

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

Parameters

value: number

Returns void

showTriggers

get showTriggers(): string

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

Returns string

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

set showTriggers(value: string): void

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

Parameters

value: string

Returns void

Methods

addEventListener

Inherited from: EventEmitterMixin< IgcTooltipComponentEventMap, Constructor<LitElement> >(LitElement)

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

type: K
listener: object
options: boolean | AddEventListenerOptions

Returns void

emitEvent

Inherited from: EventEmitterMixin< IgcTooltipComponentEventMap, Constructor<LitElement> >(LitElement)

emitEvent(type: K, eventInitDict: CustomEventInit<D>): boolean

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

type: K
eventInitDict: CustomEventInit<D>

Returns boolean

hide

Hides the tooltip if not already hidden.

hide(): Promise<boolean>

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

Returns Promise<boolean>

removeEventListener

Inherited from: EventEmitterMixin< IgcTooltipComponentEventMap, Constructor<LitElement> >(LitElement)

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

type: K
listener: object
options: boolean | EventListenerOptions

Returns void

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

Toggles the tooltip between shown/hidden state

toggle(): Promise<boolean>

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

Returns Promise<boolean>

register

register(): void

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

Returns void

Events

igcClosed

igcClosed: CustomEvent<void>

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

igcClosing

igcClosing: CustomEvent<void>

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

igcOpened

igcOpened: CustomEvent<void>

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

igcOpening

igcOpening: CustomEvent<void>

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