Web Components Tooltip

El componente Ignite UI for Web Components de información sobre herramientas proporciona una forma de mostrar una información sobre herramientas para un elemento específico. Una información sobre herramientas es una ventana emergente que muestra información relacionada con un elemento, generalmente cuando el elemento recibe el foco del teclado o cuando el mouse se desplaza sobre él.

Empezando

To start using the IgcTooltipComponent, first, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents

After that, you need to import the IgcTooltipComponent, its necessary CSS, and register its module, as follows:

import { defineComponents, IgcTooltipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTooltipComponent);

Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

Now you can start with a basic configuration of the Web Components IgcTooltipComponent.

<igc-tooltip anchor="hover-button">
  Congrats you've hovered the button!
</igc-tooltip>

<igc-button id="hover-button">Hover me</igc-button>

Usage

Tooltip target

To attach a tooltip to the desired element, use the anchor property of the IgcTooltipComponent and set it to the ID of the target element.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button">
  Congrats you've hovered the button!
</igc-tooltip>

También puede especificar el destino pasando directamente la instancia del elemento:

<igc-tooltip id="tooltip">
  Congrats you've hovered the button!
</igc-tooltip>
<igc-button id="hover-button">Hover me</igc-button>

constructor() {
  const anchor = document.querySelector('#hover-button') as IgcButtonComponent;
  const tooltip = document.querySelector('#tooltip') as IgcTooltipComponent;
  tooltip.anchor = anchor;
}

The tooltip content is defined by placing custom content between the opening and closing tags of the IgcTooltipComponent.

<igc-tooltip>
  This is my custom content here.
</igc-tooltip>

Alternatively, to set simple text, you can use the message property.

<igc-tooltip message="This is my custom content here."></igc-tooltip>

If you use both approaches (slotted content and the message property), the slotted content will take priority and the message value will be ignored.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" message="I will be hidden.">
  I will be shown!
</igc-tooltip>

In this example, the slotted content (“I will be shown!”) will be displayed instead of the message property value.

The IgcTooltipComponent content can be more than just simple text. Since the IgcTooltipComponent is a regular element in the markup, you can enhance its content by adding any elements you need and styling them accordingly.

Show/Hide delay settings

If you want to control the delay before showing and hiding the IgcTooltipComponent, you can use the showDelay and hideDelay properties. Both properties accept a number value representing time in milliseconds.

<igc-tooltip show-delay="600" hide-delay="800">
  Her name is Madelyn James.
</igc-tooltip>

[!NOTE] It's important to note that the Tooltip API methods — show, hide, and toggle — DO NOT take the showDelay and hideDelay properties into account. They act immediately when invoked.

Placement

The IgcTooltipComponent can also be positioned relative to its target element with ease. All you need to do is use the placement property along with one of the PopoverPlacement options.

If the placement property is not set, the default value is Bottom, which places the IgcTooltipComponent below the target element.

Additionally, you can make the IgcTooltipComponent "sticky" using the sticky property, which adds a close button and keeps the IgcTooltipComponent visible until the user closes it manually - either by clicking the close button or pressing the Esc key. This behavior overrides the default hover behavior, preventing the IgcTooltipComponent from disappearing when the user stops hovering over the target element.

The IgcTooltipComponent also includes an optional arrow indicator that can be configured via the withArrow property. The arrow visually connects the tooltip to its anchor element and its position automatically adjusts based on the tooltip's placement.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" placement="top-start" sticky with-arrow>
  Congrats you've hovered the button!
</igc-tooltip>

In the following example, you can see a demonstration of all tooltip placement options, arrow positioning behavior, and the sticky property in action:

Triggers

By default, the IgcTooltipComponent is triggered only while hovering over the target element. However, you can change this behavior using the showTriggers and hideTriggers properties, which allow you to control when the IgcTooltipComponent appears and disappears. These properties accept event names as values—such as click, focus, or keypress—letting you trigger the IgcTooltipComponent in different scenarios.

Advanced Example

The IgcTooltipComponent integrates seamlessly with other components, allowing you to create advanced tooltips that contain components within them. In the following example, you can see how we create descriptive tooltips by using the IgcListComponent, IgcAvatarComponent, IgcIconComponent, IgcBadgeComponent, IgcButtonComponent, IgcCardComponent and IgcCategoryChartComponent components.

Additional Properties

Apart from the properties we've already covered, the IgcTooltipComponent component offers a variety of additional properties that allow you to further configure its behavior, position, and appearance.

Nombre	Tipo	Descripción
`open`	booleano	Determina si la información sobre herramientas está visible.
`withArrow`	booleano	Determina si se debe renderizar un indicador de flecha para la información sobre herramientas.
`offset`	número	Establece la distancia en píxeles entre la información sobre herramientas y su`anchor`.

Methods

In addition to its configurable properties, the IgcTooltipComponent also exposes three methods that you can use:

Nombre	Descripción
`show`	Muestra la información sobre herramientas si aún no se ha mostrado. Si se proporciona un destino, se establece el destino como transitorio`anchor`.
`hide`	Oculta la información sobre herramientas si aún no está oculta.
`toggle`	Alterna la información sobre herramientas entre los estados mostrado y oculto.

Accessibility & ARIA Support

The IgcTooltipComponent is built with accessibility in mind and includes the following ARIA attributes:

role - When the tooltip is in its default behavior, role="tooltip" is applied. If the sticky property is enabled, the role changes to status.
inert - Dynamically toggled based on visibility. When the tooltip is hidden, it becomes inert.
aria-atomic - Set to true, ensuring that the entire tooltip content is announced when it changes.
aria-live - Set to polite, indicating to screen readers that updates should be announced only when the user is idle.

Styling

The IgcTooltipComponent component exposes two CSS parts that you can use for styling:

Nombre	Descripción
`base`	El contenedor base del componente de información sobre herramientas.
`top, right, bottom, left ...`	El área que contiene la flecha de información sobre herramientas. El nombre de la pieza coincide con el valor de la propiedad de ubicación de la información sobre herramientas.

igc-tooltip::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-tooltip::part(bottom) {
  border-bottom-color: var(--ig-primary-500);
}

Ignite UI for Web Components Tooltip Example