Angular Componente de descripción emergente | Ignite UI for Angular

LasigxTooltip directrices yigxTooltipTarget las directrices nos permiten crear una descripción emergente totalmente personalizable y adjuntarla a cualquier elemento de nuestra página. Aunque la mayoría de las descripciones tienen un número limitado de posiciones disponibles, con laigxTooltipTarget directiva podemos especificar cualquier posición que queramos en la página manteniéndola en relación con el objetivo (ancla) y proporcionar varios otros ajustes superpuestos como estrategias de desplazamiento y animaciones personalizadas.

Para comenzar con la directiva Ignite UI for Angular Tooltip, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxTooltipModule en tu archivo app.module.ts.

// app.module.ts

...
import { IgxTooltipModule } from 'igniteui-angular';
// import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule],
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxTooltipDirective como una dependencia independiente, o usar elIGX_TOOLTIP_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from 'igniteui-angular';
// import { IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: `
    <igx-avatar
      class="avatar"
      #target="tooltipTarget"
      [igxTooltipTarget]="tooltipRef"
      src="assets/images/avatar/10.jpg"
      size="medium"
      shape="circle"
    >
    </igx-avatar>

    <div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_TOOLTIP_DIRECTIVES, IgxAvatarComponent],
  /* or imports: [IgxTooltipDirective, IgxTooltipTargetDirective, IgxAvatarComponent] */
})
export class HomeComponent {}

Ahora que tienes importado el módulo o directivas de Ignite UI for Angular Tooltip, puedes empezar a usar laigxTooltip directiva.

Supongamos que queremos crear una descripción de texto sencilla como la anterior. En nuestro caso, usamos nuestro awesomeIgxAvatar como elemento, así que empezamos importando elIgxAvatarModule primero.

// app.module.ts

import { IgxTooltipModule, IgxAvatarModule } from 'igniteui-angular';
// import { IgxTooltipModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule, IgxAvatarModule],
})
export class AppModule {}

Tooltip target

El avatar será nuestro objetivo y solo tendremos que establecer laigxTooltipTarget directiva sobre él, que básicamente marca nuestro elemento como uno que tiene una descripción emergente.

LaigxTooltipTarget directiva amplía laigxToggleAction directiva.
LaigxTooltipTarget directiva se exporta con el nombre tooltipTarget.

<!--simpleTooltip.component.html-->

<igx-avatar
  class="avatar"
  #target="tooltipTarget"
  igxTooltipTarget
  src="assets/images/avatar/10.jpg"
  size="medium"
  shape="circle">
</igx-avatar>

¡Ahora vamos a crear el propio elemento de descripción emergente! Como queremos una descripción de texto sencilla, definiremos un elemento div ordinario con texto dentro y pondremos laigxTooltip directiva sobre él, que lo marca como una descripción emergente.

LaigxTooltip directiva amplía laigxToggle directiva.
LaigxTooltip directiva se exporta junto con la descripción emergente del nombre.

<!--simpleTooltip.component.html-->

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

Ahora que tenemos definidos tanto nuestro objetivo como la descripción emergente, lo único que nos queda es asignar la referencia de la descripción aligxTooltipTarget selector del objetivo.

<!--simpleTooltip.component.html-->

<igx-avatar
  class="avatar"
  #target="tooltipTarget"
  [igxTooltipTarget]="tooltipRef"
  src="assets/images/avatar/10.jpg"
  size="medium"
  shape="circle">
</igx-avatar>

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

Si todo salió bien, debería ver el ejemplo que se muestra en la sección Demostración de información sobre herramientas.

EligxTooltip contenido puede ser más que simple texto. Dado que la descripción emergente es un elemento habitual en el marcado, puedes mejorar su contenido añadiendo los elementos que necesites y estilizándolos en consecuencia.

¡Vamos a ampliar el uso de laigxTooltip y usarla para proporcionar más detalles sobre una ubicación específica en un mapa! Usaremos un div simple para representar nuestro mapa, elIgxAvatar para un logo en la descripción yIgxIcon el para el icono de ubicación en nuestro mapa. Para ello, obtendremos sus respectivos módulos.

// app.module.ts

import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular';
// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule],
})
export class AppModule {}

También usaremos los siguientes estilos para nuestra aplicación:

/* richTooltip.component.css */

.location:hover {
  cursor: pointer;
}

.map {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 252px;
  background-image: url(assets/images/card/media/infragisticsMap.png);
  border: 1px solid #d4d4d4;
}

.locationTooltip {
  width: 310px;
  background-color: var(--igx-grays-700);
  padding: 3px;
  font-size: 13px;
}

.locationTooltipContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  margin-right: 10px;
  min-width: 25px;
  width: 45px;
  height: 45px;
}

Comencemos creando nuestro mapa. Necesitamos un div simple que tenga como fondo una imagen con un mapa. ¡Además, agregaremos un ícono que nos indicará la posición de nuestra ubicación! Dado que queremos proporcionar más detalles para esta ubicación, nuestro ícono obviamente será el objetivo de la información sobre herramientas.

<!--richTooltip.component.html-->

<div class="map">
  <igx-icon
    class="location"
    [style.color]="'blue'"
    fontSet="material"
    [igxTooltipTarget]="locationTooltip"
    >location_on</igx-icon>
  ...
</div>

¡Ahora la información sobre herramientas! Para su contenido, crearemos un contenedor que se llenará con algunos elementos de información de texto y un avatar. Luego, simplemente adjuntaremos la información sobre herramientas al objetivo e incluiremos un bonito estilo CSS.

<!--richTooltip.component.html-->

<div class="wrapper">
  <div class="map">
    <igx-icon
      class="location"
      [style.color]="'blue'"
      fontSet="material"
      [igxTooltipTarget]="locationTooltip"
      >location_on</igx-icon>

    <div class="locationTooltip" #locationTooltip="tooltip" igxTooltip>
      <div class="locationTooltipContent">
        <igx-avatar
          class="logo"
          src="assets/images/card/avatars/igLogo.png"
          size="medium"
          shape="square">
        </igx-avatar>
        <div>
          <div>Infragistics Inc. HQ</div>
          <div>2 Commerce Dr, Cranbury, NJ 08512, USA</div>
        </div>
      </div>
    </div>
  </div>
</div>

Si todo ha ido bien, así es como debería verse nuestra ubicación y descripción emergente:

Advanced Example

La descripción emergente se integra perfectamente con otros componentes, permitiéndote crear descripciones avanzadas que contengan componentes en su interior. En el siguiente ejemplo, puedes ver cómo creamos descripciones descriptivas usando losIgxList componentes.IgxAvatarIgxIconIgxBadgeIgxButtonIgxCardIgxCategoryChart

Show/Hide delay settings

¿Y si queremos controlar el tiempo que debe pasar antes de mostrar y ocultar la descripción introductoria? Para este propósito podemos usar lasshowDelay propiedades yhideDelay de laigxTooltipTarget directiva. Ambas propiedades son de número de tipo y tardan en milisegundos.

Note

El comportamiento de interacción de la interfaz de usuario incorporado de lasIgxTooltipTargetDirective obras teniendoshowDelay en cuenta los valores de las propiedadeshideDelay. Mostrar y ocultar la descripción emergente a través de la API o la API de NOIgxTooltipDirective tiene en cuenta los valores deshowDelay la propiedad de YhideDelay. Si fuera necesario, dicha lógica tendría que implementarse manualmente según las especificaciones de la aplicación.

Overlay configuration

Ambas directivasigxTooltip yigxTooltipTarget utilizan elIgxOverlayService para abrir y cerrar el elemento de descripción emergente correspondiente.

LaigxTooltipTarget directiva expone unapositionSettings propiedad que puede usarse para personalizar las animaciones de nuestra descripción introductiva, su posición en la interfaz y mucho más. Si esta propiedad no está activada, entonces se usarán los ajustes de posición por defecto.

Para personalizar aún más la descripción emergente, usa laoverlaySettings propiedad (heredada de laigxToggleAction).

<igx-icon [igxTooltipTarget]="tooltipRef" [positionSettings]="positionSettings" [overlaySettings]="overlaySettings">
  info
</igx-icon>

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

public positionSettings: PositionSettings = {
  horizontalDirection: HorizontalAlignment.Left,
  horizontalStartPoint: HorizontalAlignment.Left,
  verticalDirection: VerticalAlignment.Top,
  verticalStartPoint: VerticalAlignment.Bottom,
  openAnimation: useAnimation(slideInTop, { params: { duration: '2000ms' } }),
  closeAnimation: useAnimation(slideOutBottom, { params: { duration: '2000ms'} }),
  offset: 10
}

public overlaySettings: OverlaySettings = {
  closeOnEscape: false,
};

Note

Cualquier propiedad que se configure a través delpositionSettings oroverlaySettings anulará la misma propiedad desde la configuración predeterminada y tendrá un impacto directo en la descripción emergente.

Additional Properties

Además de las propiedades que ya hemos tratado, ofreceigxTooltipTarget una variedad de propiedades adicionales que te permiten configurar mejor el comportamiento y la apariencia de la descripción emergente.

Puedes hacer que la descripción emergente sea "pegajosa" usando lasticky propiedad, que añade un botón de cierre y mantiene la descripción emergente visible hasta que el usuario la cierra manualmente, ya sea haciendo clic en el botón de cerrar o pulsando laEsc tecla. Este comportamiento anula el comportamiento predeterminado de pasar el cursor, evitando que la descripción emergente desaparezca cuando el usuario deja de pasar el cursor sobre el elemento objetivo.

<igx-icon [igxTooltipTarget]="tooltipRef" [sticky]="true">
  info
</igx-icon>

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

Para personalizar el botón de cierre por defecto, usa lacloseButtonTemplate propiedad.


<igx-icon [igxTooltipTarget]="tooltipRef" [sticky]="true" [closeButtonTemplate]="customTemplate">
  info
</igx-icon>

<ng-template #customTemplate>
  <igx-icon>cancel</igx-icon>
</ng-template>

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

Note

Cualquier contenido personalizado añadido a través de lacloseButtonTemplate se renderiza solo cuando la descripción emergente está en modo fijo.

Además, puedes añadir un indicador de flecha a la descripción emergente usando lahasArrow propiedad.

<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true">
  info
</igx-icon>

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

El elemento de la flecha se posiciona según la posición proporcionada. Si las direcciones y puntos de partida no corresponden a ninguno de los valores de posición predefinidos, la flecha se posiciona en la parte superior central de la descripción emergente (posiciónbottom predeterminada de la descripción emergente).

Valores de posición predefinidos

Posición	Dirección horizontal	Punto inicial horizontal	Dirección vertical	Punto de inicio vertical
arriba	Alineación.Horizontal.Centro	Alineación.Horizontal.Centro	VerticalAlignment.Top	VerticalAlignment.Top
inicio superior	Alineación Horizontal.Derecha	Alineación Horizontal.Izquierda	VerticalAlignment.Top	VerticalAlignment.Top
extremo superior	Alineación Horizontal.Izquierda	Alineación Horizontal.Derecha	VerticalAlignment.Top	VerticalAlignment.Top
abajo	Alineación.Horizontal.Centro	Alineación.Horizontal.Centro	Alineación vertical.Inferior	Alineación vertical.Inferior
inicio desde abajo	Alineación Horizontal.Derecha	Alineación Horizontal.Izquierda	Alineación vertical.Inferior	Alineación vertical.Inferior
extremo inferior	Alineación Horizontal.Izquierda	Alineación Horizontal.Derecha	Alineación vertical.Inferior	Alineación vertical.Inferior
Derecha	Alineación Horizontal.Derecha	Alineación Horizontal.Derecha	Alineación vertical.Medio	Alineación vertical.Medio
Inicio correcto	Alineación Horizontal.Derecha	Alineación Horizontal.Derecha	Alineación vertical.Inferior	VerticalAlignment.Top
extremo derecho	Alineación Horizontal.Derecha	Alineación Horizontal.Derecha	VerticalAlignment.Top	Alineación vertical.Inferior
Izquierda	Alineación Horizontal.Izquierda	Alineación Horizontal.Izquierda	Alineación vertical.Medio	Alineación vertical.Medio
inicio izquierdo	Alineación Horizontal.Izquierda	Alineación Horizontal.Izquierda	Alineación vertical.Inferior	VerticalAlignment.Top
extremo izquierdo	Alineación Horizontal.Izquierda	Alineación Horizontal.Izquierda	VerticalAlignment.Top	Alineación vertical.Inferior

En el siguiente ejemplo, puede ver una demostración de todas las opciones de posición y el comportamiento de posicionamiento de la flecha en acción:

Personalización de la posición de la flecha

Para personalizar la posición de la flecha, puedes anular elpositionArrow(arrow: HTMLElement, arrowFit: ArrowFit) método.

Por ejemplo:

export class CustomStrategy extends TooltipPositioningStrategy {
  constructor(settings?: PositionSettings) {
    super(settings);
  }

  public override positionArrow(arrow: HTMLElement, arrowFit: ArrowFit): void {
    Object.assign(arrow.style, {
      left: '-0.25rem',
      transform: 'rotate(-45deg)',
      [arrowFit.direction]: '-0.25rem',
    });
  }
}

public overlaySettings: OverlaySettings = {
  positionStrategy: new CustomStrategy({
    horizontalDirection: HorizontalAlignment.Right,
    horizontalStartPoint: HorizontalAlignment.Right,
    verticalDirection: VerticalAlignment.Bottom,
    verticalStartPoint: VerticalAlignment.Bottom,
  })
};

<igx-icon [igxTooltipTarget]="tooltipRef" [hasArrow]="true" [overlaySettings]="overlaySettings">
  info
</igx-icon>

<div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>

Estilismo

Para empezar a estilizar la descripción emergente, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende lostooltip-theme parámetros y proporciona los$text-color$background$border-radius parámetros.

$dark-tooltip: tooltip-theme(
  $text-color: #ecaa53,
  $background: #011627,
  $border-radius: 6px,
);

Note

Para dar estilo a cualquier componente adicional que se utilice como parte del contenido de la descripción emergente (comoIgxButton,IgxSwitch etc.), debe crearse un tema adicional específico para cada componente respectivo y colocado únicamente dentro del alcance de la descripción emergente (para que no afecte al resto de la aplicación).

Como la descripción emergente utiliza elIgxOverlayService tema, para que nuestro tema personalizado alcance la descripción que queremos estilizar, proporcionaremos una salida específica donde la descripción emergente se colocará en el DOM cuando sea visible.

<igx-avatar
  #target="tooltipTarget"
  [igxTooltipTarget]="tooltipRef"
  [igxToggleOutlet]="outlet"
>
</igx-avatar>

<div #outlet="overlay-outlet" igxOverlayOutlet>
  <div #tooltipRef="tooltip" igxTooltip>Her name is Madelyn James</div>
</div>

El último paso es incluir el tema del componente en nuestra aplicación.

@include css-vars($dark-tooltip);

Ahora nuestra información sobre herramientas con estilo debería verse así:

Demo

Styling with Tailwind

Puedes personalizar la descripción emergente usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de Tailwind en tu hoja de estilos global, puedes aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-tooltip,dark-tooltip.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Luego puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el Tema IgxTooltip. La sintaxis es la siguiente:

<div
  class="!light-tooltip ![--background:#90B69F]"
  #tooltipRef="tooltip"
  igxTooltip>
  Her name is Madelyn James
</div>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tu descripción emergente debería verse así:

Accessibility

EstáigxTooltip construida pensando en la accesibilidad e incluye las siguientes propiedades y atributos ARIA:

idPropiedad - generada automáticamente si no está establecida por el desarrollador.
role- Cuando la descripción emergente está en su comportamiento predeterminado,role="tooltip" se aplica. Si lasticky propiedad está habilitada, el rol cambia astatus.
aria-hidden- se actualiza automáticamente dependiendo de si la descripción emergente es visible o no.

Al establecer el atributo aria-descriptedby del objetivo en la descripción de herramientas de sus respectivas descripcionesid, se proporcionará una referencia al elemento de descripción emergente. Esto proporciona a los lectores de pantalla la información necesaria para leer el contenido de la descripción emergente cuando el usuario final activa la descripción.

Se debe tener especial cuidado en los siguientes escenarios:

El contenido de la información sobre herramientas es demasiado complejo para interpretarlo automáticamente.
La información sobre herramientas se utiliza con un comportamiento implementado manualmente (por ejemplo, mostrar/ocultar manualmente) en lugar del comportamiento integrado.
El elemento objetivo no se puede enfocar.

Notes and Limitations

Limitación	Descripción
Estrategia de posición personalizada con flecha	La`igxTooltipTarget` directiva usa`TooltipPositionStrategy` el elemento para colocar la información sobre herramientas y la flecha. Si se usa una personalizada`positionStrategy` y`hasArrow` se establece en`true`, la estrategia personalizada debe extender el`TooltipPositionStrategy`. De lo contrario, la flecha no se mostrará.

API References

En este artículo aprendimos a crear, configurar y diseñar increíbles descripciones emergentes para los elementos de nuestra página. También utilizamos algunos componentes Ignite UI for Angular adicionales, como iconos y avatares, para mejorar el diseño de nuestra aplicación. Las API respectivas se enumeran a continuación:

Componentes y/o directivas adicionales que se utilizaron:

Styles:

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

Descripción general de la directiva de información sobre herramientas de Angular

Angular Tooltip Example

Getting Started with Ignite UI for Angular Tooltip

Using the Angular Tooltip

Tooltip target

Información sobre herramientas

Attach tooltip to target

Rich tooltip

Advanced Example

Show/Hide delay settings

Note

Overlay configuration

Note

Additional Properties

Note

Valores de posición predefinidos

Personalización de la posición de la flecha

Estilismo

Note

Demo

Styling with Tailwind

Note

Accessibility

Notes and Limitations

API References

Additional Resources

Tematización