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 | ElementDefined in src/components/tooltip/tooltip.ts:219
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 = 300Defined in src/components/tooltip/tooltip.ts:271
message
Section titled "message"Specifies plain text as the tooltip content.
message: string = ''Defined in src/components/tooltip/tooltip.ts:279
offset
Section titled "offset"The offset of the tooltip from the anchor in pixels.
offset: number = 6Defined in src/components/tooltip/tooltip.ts:198
placement
Section titled "placement"Where to place the tooltip relative to its anchor element.
placement: PopoverPlacement = 'bottom'Defined in src/components/tooltip/tooltip.ts:207
showDelay
Section titled "showDelay"Specifies the number of milliseconds that should pass before showing the tooltip.
showDelay: number = 200Defined in src/components/tooltip/tooltip.ts:261
sticky
Section titled "sticky"Specifies if the tooltip remains visible until the user closes it via the close button or Esc key.
sticky: boolean = falseDefined in src/components/tooltip/tooltip.ts:288
withArrow
Section titled "withArrow"Whether to render an arrow indicator for the tooltip.
withArrow: boolean = falseDefined in src/components/tooltip/tooltip.ts:189
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.
tagName: "igc-tooltip" = 'igc-tooltip'Defined in src/components/tooltip/tooltip.ts:68
Accessors
Section titled "Accessors"hideTriggers
Section titled "hideTriggers"get hideTriggers(): anyDefined in src/components/tooltip/tooltip.ts:245
Which event triggers will hide the tooltip. Expects a comma separated string of different event triggers.
set hideTriggers(value: string): voidDefined in src/components/tooltip/tooltip.ts:245
Parameters
- value:
string
Returns void
get open(): anyDefined in src/components/tooltip/tooltip.ts:173
Whether the tooltip is showing.
set open(value: boolean): voidDefined in src/components/tooltip/tooltip.ts:173
Parameters
- value:
boolean
Returns void
showTriggers
Section titled "showTriggers"get showTriggers(): anyDefined in src/components/tooltip/tooltip.ts:229
Which event triggers will show the tooltip. Expects a comma separated string of different event triggers.
set showTriggers(value: string): voidDefined in src/components/tooltip/tooltip.ts:229
Parameters
- value:
string
Returns void
Methods
Section titled "Methods"Hides the tooltip if not already hidden.
hide(): Promise<boolean>Defined in src/components/tooltip/tooltip.ts:473
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>Defined in src/components/tooltip/tooltip.ts:457
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:483