React Información sobre herramientas

    El componente Ignite UI for React 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.

    Ignite UI for React Tooltip Example

    Empezando

    To start using the IgrTooltip, first, you need to install the Ignite UI for React by running the following command:

    npm install igniteui-react

    After that, you need to import the IgrTooltip component and its necessary CSS as follows:

    import { IgrTooltip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

    Now you can start with a basic configuration of the React IgrTooltip.

    <IgrTooltip anchor="hover-button">
  Congrats you have hovered the button!
</IgrTooltip>

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

    Usage

    Tooltip target

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

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button">
  Congrats you have hovered the button!
</IgrTooltip>

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

    const anchor = document.querySelector('#hover-button') as IgrButton;
const tooltip = document.querySelector('#tooltip') as IgrTooltip;
tooltip.anchor = anchor;

    <IgrTooltip id="tooltip">
  Congrats you have hovered the button!
</IgrTooltip>
<IgrButton id="hover-button">Hover me</IgrButton>

    Tooltip content

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

    <IgrTooltip>
  Congrats you have hovered the button!
</IgrTooltip>

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

    <IgrTooltip message="This is my custom content here."></IgrTooltip>

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

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

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

    ElIgrTooltip contenido puede ser más que simple texto. Como esIgrTooltip 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 elIgrTooltip tiempo, puedes usar lasshowDelay propiedades yhideDelay. Ambas propiedades aceptan un valor numérico que representa el tiempo en milisegundos.

    <IgrTooltip showDelay="600" hideDelay="800">
  Her name is Madelyn James.
</IgrTooltip>

    [!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énIgrTooltip 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 elIgrTooltip por debajo del elemento objetivo.

    Además, puedes hacer que elIgrTooltip "fijo" sea usando lasticky propiedad, que añade un botón de cierre y mantiene elIgrTooltip 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 desaparezcanIgrTooltip cuando el usuario deja de pasar el cursor sobre el elemento objetivo.

    TambiénIgrTooltip 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.

    <IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" placement="top-start" sticky withArrow={true}>
  Congrats you have hovered the button!
</IgrTooltip>

    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, seIgrTooltip 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.IgrTooltip Estas propiedades aceptan nombres de eventos como valores—comoclick,focus okeypress—permitiéndote activar losIgrTooltip en diferentes escenarios.

    Advanced Example

    SeIgrTooltip 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 losIgrList componentes.IgrAvatar​IgrIcon​IgrBadge​IgrButton​IgrCard​IgrCategoryChart​

    Additional Properties

    Además de las propiedades que ya hemos tratado, elIgrTooltip 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 suanchor.

    Methods

    Además de sus propiedades configurables,IgrTooltip 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 transitorioanchor.
    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áIgrTooltip 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

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

    API References

    Additional Resources