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

Para adjuntar una descripción emergente al elemento deseado, usa laanchor propiedad de yIgcTooltipComponent configúrala al ID del elemento objetivo.

<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;
}

El contenido emergente se define colocando contenido personalizado entre las etiquetas de apertura y cierre de laIgcTooltipComponent.

<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.

ElIgcTooltipComponent contenido puede ser más que simple texto. Como esIgcTooltipComponent un elemento regular en el marcado, puedes mejorar su contenido añadiendo los elementos que necesites y estilizándolos en consecuencia.

Show/Hide delay settings

Si quieres controlar el retardo antes de mostrar y ocultar elIgcTooltipComponent tiempo, puedes usar lasshowDelay propiedades yhideDelay. Ambas propiedades aceptan un valor numérico que representa el tiempo en milisegundos.

<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

TambiénIgcTooltipComponent puede posicionarse con facilidad respecto a su elemento objetivo. Solo tienes que usar laplacement propiedad junto con una de lasPopoverPlacement opciones.

Si laplacement propiedad no está fijada, el valor por defecto síBottom, lo que coloca elIgcTooltipComponent por debajo del elemento objetivo.

Además, puedes hacer que elIgcTooltipComponent "fijo" sea usando lasticky propiedad, que añade un botón de cierre y mantiene elIgcTooltipComponent botón visible hasta que el usuario lo cierra manualmente, ya sea pulsando el botón de cerrar o pulsando laEsc tecla. Este comportamiento anula el comportamiento de hover por defecto, impidiendo que desaparezcanIgcTooltipComponent cuando el usuario deja de pasar el cursor sobre el elemento objetivo.

TambiénIgcTooltipComponent incluye un indicador de flecha opcional que se puede configurar a través de lawithArrow propiedad. La flecha conecta visualmente la descripción emergente con su elemento ancla y su posición se ajusta automáticamente según la descripción de laplacement descripción.

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

En el siguiente ejemplo, puedes ver una demostración de todas las opciones de colocación de la descripción emergente, el comportamiento de posicionamiento de flechas y lasticky propiedad en acción:

Triggers

Por defecto, seIgcTooltipComponent activa solo mientras se pasa el cursor sobre el elemento objetivo. Sin embargo, puedes cambiar este comportamiento usando lasshowTriggers propiedades yhideTriggers, que te permiten controlar cuándo aparece y desaparece.IgcTooltipComponent Estas propiedades aceptan nombres de eventos como valores—comoclick,focus okeypress—permitiéndote activar losIgcTooltipComponent en diferentes escenarios.

Advanced Example

SeIgcTooltipComponent integra perfectamente con otros componentes, permitiéndote crear descripciones avanzadas que contienen componentes en su interior. En el siguiente ejemplo, puedes ver cómo creamos descripciones descriptivas usando losIgcListComponent componentes.IgcAvatarComponentIgcIconComponentIgcBadgeComponentIgcButtonComponentIgcCardComponentIgcCategoryChartComponent

Additional Properties

Además de las propiedades que ya hemos tratado, elIgcTooltipComponent componente ofrece una variedad de propiedades adicionales que te permiten configurar mejor su comportamiento, posición y apariencia.

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

Además de sus propiedades configurables,IgcTooltipComponent también expone tres métodos que puedes utilizar:

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

EstáIgcTooltipComponent diseñado pensando en la accesibilidad e incluye los siguientes atributos ARIA:

role- Cuando la descripción emergente está en su comportamiento predeterminado,role="tooltip" se aplica. Si lasticky propiedad está habilitada, el rol cambia astatus.
inert- Alterna dinámicamente según la visibilidad. Cuando la descripción emergente está oculta, se vuelve inerte.
aria-atomic- Ajustarse a true, asegurando que todo el contenido de la descripción emergente se anuncie cuando cambia.
aria-live- Configurado en educado, indicando a los lectores de pantalla que las actualizaciones deben anunciarse solo cuando el usuario está inactivo.

Styling

ElIgcTooltipComponent componente expone dos partes CSS que puedes usar para estilizado:

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