Blazor Tooltip

El componente Información de herramientas de Ignite UI for Blazor proporciona una forma de mostrar una información de 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.

Getting Started

Antes de usarlosIgbTooltip, debes registrarlo de la siguiente manera:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));

También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbTooltip componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

Ahora puedes empezar con una configuración básica de la BlazorIgbTooltip.

<IgbTooltip Anchor="hover-button">
  Congrats you have hovered the button!
</IgbTooltip>

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

Usage

Tooltip target

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

<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button">
  Congrats you have hovered the button!
</IgbTooltip>

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

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

ElIgbTooltip contenido puede ser más que simple texto. Como esIgbTooltip 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 elIgbTooltip tiempo, puedes usar lasShowDelay propiedades yHideDelay. Ambas propiedades aceptan un valor numérico que representa el tiempo en milisegundos.

<IgbTooltip ShowDelay="600" HideDelay="800">
  Her name is Madelyn James.
</IgbTooltip>

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

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

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

<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button" Placement="PopoverPlacement.TopStart" Sticky="true" DisableArrow="true">
  Congrats you have hovered the button!
</IgbTooltip>

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

Advanced Example

SeIgbTooltip 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 losIgbList componentes.IgbAvatarIgbIconIgbBadgeIgbButtonIgbCardIgbCategoryChart

Additional Properties

Además de las propiedades que ya hemos tratado, elIgbTooltip 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,IgbTooltip 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áIgbTooltip 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

ElIgbTooltip 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 Blazor Tooltip Example