Angular Componente da dica de ferramenta | Ignite UI for Angular

AsigxTooltip diretrizes e asigxTooltipTarget diretrizes nos dão a capacidade de criar uma dica de ferramenta totalmente personalizável e anexá-la a qualquer elemento da nossa página. Embora a maioria das dicas de ferramentas tenha um número limitado de posições disponíveis, com aigxTooltipTarget diretriz podemos especificar qualquer posição que quisermos na página mantendo em relação ao alvo (âncora) e fornecer várias outras configurações de sobreposição, como estratégias de rolagem e animações personalizadas!

Para começar a usar a diretiva Ignite UI for Angular Tooltip, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar issoIgxTooltipModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxTooltipDirective como uma dependência independente ou usar oIGX_TOOLTIP_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

import { IGX_TOOLTIP_DIRECTIVES } from 'igniteui-angular/tooltip';
import { IgxAvatarComponent } from 'igniteui-angular/avatar';
// 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 {}

Agora que você tem o módulo ou diretivas Ignite UI for Angular Tooltip importados, pode começar a usar aigxTooltip diretiva.

Digamos que queiramos criar uma dica de texto simples como a acima. No nosso caso, estamos usando nosso awesomeIgxAvatar como elemento, então começamos importando oIgxAvatarModule primeiro.

// app.module.ts

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

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

Tooltip target

O avatar será nosso alvo e tudo o que precisamos fazer é definir aigxTooltipTarget diretriz nele, que basicamente marca nosso elemento como um que tem uma dica de ferramenta.

AigxTooltipTarget diretiva estende aigxToggleAction diretiva.
AigxTooltipTarget diretiva é exportada com o nome tooltipTarget.

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

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

Agora vamos criar o próprio elemento tooltip! Como queremos uma dica de texto simples, vamos definir um elemento div comum com texto dentro e definir aigxTooltip diretriz nele, que o marca como uma dica de ferramenta.

AigxTooltip diretiva estende aigxToggle diretiva.
AigxTooltip diretiva é exportada com a dica de ferramenta do nome.

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

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

Agora que temos tanto nosso alvo quanto a dica definidos, tudo o que falta para fazermos é atribuir a referência da dica aoigxTooltipTarget seletor do alvo.

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

Se tudo correr bem, você deverá ver o exemplo mostrado na seção Demonstração de dica de ferramenta.

OigxTooltip conteúdo pode ser mais do que apenas texto. Como a dica de ferramenta é um elemento regular na marcação, você pode aprimorar seu conteúdo adicionando quaisquer elementos necessários e estilizando-os de acordo.

Vamos expandir o uso de eigxTooltip usá-lo para fornecer mais detalhes para um local específico em um mapa! Usaremos um div simples para representar nosso mapa, oIgxAvatar para um logo na dica de ferramenta e oIgxIcon ícone de localização no mapa. Para isso, receberemos seus respectivos módulos.

// app.module.ts

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

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

Também usaremos os seguintes estilos para nossa aplicação:

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

Vamos começar criando nosso mapa. Precisamos de um div simples que tenha como plano de fundo uma imagem com um mapa. Além disso, adicionaremos um ícone que indicará a posição da nossa localização! Como queremos fornecer mais detalhes para essa localização, nosso ícone obviamente será o alvo da dica de ferramenta.

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

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

Agora para a dica de ferramenta! Para seu conteúdo, criaremos um contêiner que será preenchido com alguns elementos de informação de texto e um avatar. Então, simplesmente anexaremos a dica de ferramenta ao alvo e incluiremos um estilo CSS bacana!

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

Se tudo correr bem, é assim que nossa localização e dica de ferramenta devem ficar:

Advanced Example

A tooltip se integra perfeitamente com outros componentes, permitindo criar tooltips avançados que contêm componentes dentro deles. No exemplo a seguir, você pode ver como criamos dicas descritivas usando osIgxList componentes,IgxAvatar,IgxIcon,IgxBadge,IgxButton,andIgxCard (eIgxCategoryChart componentes).

Show/Hide delay settings

E se quisermos controlar o tempo que deve passar antes de mostrar e esconder a dica de ferramenta? Para esse fim, podemos usar asshowDelay propriedades ehideDelay daigxTooltipTarget diretiva. Ambas as propriedades são de tipo número e levam tempo em milissegundos.

Note

O comportamento de interação da interface de usuário embutido dasIgxTooltipTargetDirective obras levandoshowDelay em conta os valores das propriedadeshideDelay. Mostrar e esconder a dica de ferramenta através da API ou da API doIgxTooltipDirective NÃO leva em conta os valores dashowDelay propriedade ehideDelay de . Se necessário, tal lógica teria que ser implementada manualmente de acordo com as especificidades da aplicação.

Overlay configuration

Tanto asigxTooltip diretivas eigxTooltipTarget usam oIgxOverlayService para abrir e fechar o respectivo elemento tooltip.

AigxTooltipTarget diretriz expõe umapositionSettings propriedade que pode ser usada para personalizar as animações da nossa dica de ferramenta, sua posição na interface e muito mais! Se essa propriedade não estiver definida, as configurações padrão de posição serão usadas.

Para personalizar ainda mais a dica de ferramenta, use aoverlaySettings propriedade (herdada de oigxToggleAction).

<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

Qualquer propriedade definida pelopositionSettings ouoverlaySettings vai sobrescrever a mesma propriedade das configurações padrão e terá impacto direto na tooltip.

Additional Properties

Além das propriedades que já abordamos, eleigxTooltipTarget oferece uma variedade de propriedades adicionais que permitem configurar melhor o comportamento e a aparência da tooltip.

Você pode deixar a dica "fixa" usando asticky propriedade, que adiciona um botão de fechar e mantém a dica visível até que o usuário feche manualmente - clicando no botão de fechar ou pressionando aEsc tecla. Esse comportamento sobrepõe o comportamento padrão de hover, impedindo que a dica de ferramenta desapareça quando o usuário para de passar o mouse sobre o elemento alvo.

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

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

Para personalizar o botão padrão de fechar, use acloseButtonTemplate propriedade.


<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

Qualquer conteúdo personalizado adicionado via ocloseButtonTemplate jogo só é renderizado quando a dica está no modo fixo.

Além disso, você pode adicionar um indicador de seta na dica usando ahasArrow propriedade.

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

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

O elemento da seta é posicionado com base nas configurações de posição fornecidas. Se as direções e pontos de partida não corresponderem a nenhum dos valores de posição predefinidos, a seta fica posicionada no canto superior central da dica de ferramenta (posiçãobottom padrão da dica de ferramenta).

Valores de posição predefinidos

Posição	Direção horizontal	Ponto de partida horizontal	Direção vertical	Ponto de partida vertical
principal	AlinhamentoHorizontal.Centro	AlinhamentoHorizontal.Centro	VerticalAlignment.Top	VerticalAlignment.Top
começo de primeira	AlinhamentoHorizontal.Direita	AlinhamentoHorizontal.Esquerda	VerticalAlignment.Top	VerticalAlignment.Top
topo de gama	AlinhamentoHorizontal.Esquerda	AlinhamentoHorizontal.Direita	VerticalAlignment.Top	VerticalAlignment.Top
fundo	AlinhamentoHorizontal.Centro	AlinhamentoHorizontal.Centro	AlinhamentoVertical.Bottom	AlinhamentoVertical.Bottom
começo de baixo	AlinhamentoHorizontal.Direita	AlinhamentoHorizontal.Esquerda	AlinhamentoVertical.Bottom	AlinhamentoVertical.Bottom
extremidade inferior	AlinhamentoHorizontal.Esquerda	AlinhamentoHorizontal.Direita	AlinhamentoVertical.Bottom	AlinhamentoVertical.Bottom
Certo	AlinhamentoHorizontal.Direita	AlinhamentoHorizontal.Direita	AlinhamentoVertical.Meio	AlinhamentoVertical.Meio
início direito	AlinhamentoHorizontal.Direita	AlinhamentoHorizontal.Direita	AlinhamentoVertical.Bottom	VerticalAlignment.Top
extremidade direita	AlinhamentoHorizontal.Direita	AlinhamentoHorizontal.Direita	VerticalAlignment.Top	AlinhamentoVertical.Bottom
Esquerda	AlinhamentoHorizontal.Esquerda	AlinhamentoHorizontal.Esquerda	AlinhamentoVertical.Meio	AlinhamentoVertical.Meio
início esquerdo	AlinhamentoHorizontal.Esquerda	AlinhamentoHorizontal.Esquerda	AlinhamentoVertical.Bottom	VerticalAlignment.Top
extremidade esquerda	AlinhamentoHorizontal.Esquerda	AlinhamentoHorizontal.Esquerda	VerticalAlignment.Top	AlinhamentoVertical.Bottom

No exemplo a seguir, você pode ver uma demonstração de todas as opções de posição e o comportamento de posicionamento da seta em ação:

Personalizando a posição da seta

Para personalizar a posição da seta, você pode sobrescrever opositionArrow(arrow: HTMLElement, arrowFit: ArrowFit) método.

Por exemplo:

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>

Estilização

Para começar a estilizar a dica de ferramenta, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

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

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

Seguindo a abordagem mais simples, criamos um novo tema que estende etooltip-theme fornece os$text-color$background$border-radius parâmetros.

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

Note

Para estilizar quaisquer componentes adicionais usados como parte do conteúdo da tooltip (comoIgxButton,IgxSwitch, etc.), um tema adicional deve ser criado que seja específico para o respectivo componente e colocado apenas sob o escopo da tooltip (para que não afete o restante da aplicação).

Como a tooltip usa oIgxOverlayService padrão, para que nosso tema personalizado alcance a dica que queremos estilizar, forneceremos uma saída específica onde a tooltip será colocada no DOM quando estiver visível.

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

O último passo é incluir o tema do componente em nosso aplicativo.

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

Agora nossa dica de ferramenta estilizada deve ficar assim:

Demo

Styling with Tailwind

Você pode estilizar a dica usando nossas classes utilitárias personalizadas do Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação Tailwind na sua folha de estilos global, você pode aplicar os utilitários de tema desejados da seguinte forma:

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

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-tooltip,dark-tooltip.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. Você pode então sobrescrever as variáveis CSS geradas usandoarbitrary properties Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no Tema IgxTooltip. A sintaxe é a seguinte:

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

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, sua dica deve ficar assim:

Accessibility

OigxTooltip projeto foi construído pensando na acessibilidade e inclui as seguintes propriedades e atributos ARIA:

idpropriedade - gerada automaticamente se não for definida pelo desenvolvedor.
role- Quando a dica de ferramenta está em seu comportamento padrão,role="tooltip" é aplicada. Se asticky propriedade estiver ativada, o papel muda parastatus.
aria-hidden- atualizado automaticamente dependendo se a dica de ferramenta é visível ou não.

Ao definir o atributo aria-describedby do alvo para suas respectivas dicasid de tooltip, uma referência será fornecida ao elemento tooltip. Isso fornece aos leitores de tela as informações necessárias para ler o conteúdo da tooltip quando o usuário final aciona a tooltip.

Cuidado extra deve ser tomado nos seguintes cenários:

O conteúdo da dica de ferramenta é muito complexo para ser interpretado automaticamente.
A dica de ferramenta é usada com um comportamento implementado manualmente (por exemplo, mostrar/ocultar manualmente) em vez do comportamento integrado.
O elemento alvo não pode ser focado.

Notes and Limitations

Limitação	Descrição
Estratégia de posição personalizada com seta	A`igxTooltipTarget` diretiva usa o`TooltipPositionStrategy` para posicionar a dica de ferramenta e o elemento de seta. Se um costume`positionStrategy` for usado e`hasArrow` definido como`true`, a estratégia personalizada deverá estender o`TooltipPositionStrategy`. Caso contrário, a seta não será exibida.

API References

Neste artigo, aprendemos como criar, configurar e estilizar dicas de ferramentas incríveis para os elementos em nossa página! Também usamos alguns componentes adicionais Ignite UI for Angular como ícones e avatares, para melhorar o design do nosso aplicativo! As respectivas APIs estão listadas abaixo:

Componentes e/ou diretivas adicionais que foram usados:

Styles:

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral da diretiva Angular Tooltip

Angular Tooltip Example

Getting Started with Ignite UI for Angular Tooltip

Using the Angular Tooltip

Tooltip target

Dica de ferramenta

Attach tooltip to target

Rich tooltip

Advanced Example

Show/Hide delay settings

Note

Overlay configuration

Note

Additional Properties

Note

Valores de posição predefinidos

Personalizando a posição da seta

Estilização

Note

Demo

Styling with Tailwind

Note

Accessibility

Notes and Limitations

API References

Additional Resources

Temas