Web Components Tooltip

O componente Ignite UI for Web Components Dica de ferramenta fornece uma maneira de exibir uma dica de ferramenta para um elemento específico. Uma dica de ferramenta é um pop-up que exibe informações relacionadas a um elemento, geralmente quando o elemento recebe o foco do teclado ou quando o mouse passa sobre ele.

Começando

Para começar a usar,IgcTooltipComponent primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Depois disso, você precisa importar oIgcTooltipComponent CSS necessário e registrar seu módulo, da seguinte forma:

import { defineComponents, IgcTooltipComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcTooltipComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Comecando.

Agora você pode começar com uma configuração básica do Web ComponentsIgcTooltipComponent.

<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 anexar uma dica de ferramenta ao elemento desejado, use aanchor propriedade de eIgcTooltipComponent defina para o ID do elemento alvo.

<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button">
  Congrats you've hovered the button!
</igc-tooltip>

Você também pode especificar o destino passando a instância do elemento diretamente:

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

O conteúdo da dica de ferramenta é definido colocando conteúdo personalizado entre as tags de abertura e fechamento doIgcTooltipComponent.

<igc-tooltip>
  This is my custom content here.
</igc-tooltip>

Alternativamente, para definir texto simples, você pode usar amessage propriedade.

<igc-tooltip message="This is my custom content here."></igc-tooltip>

Se você usar ambas as abordagens (conteúdo com slots e amessage propriedade), o conteúdo com slots terá prioridade e omessage valor será ignorado.

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

Neste exemplo, o conteúdo com ranhuras ("Eu serei mostrado!") será exibido em vez do valor damessage propriedade.

OIgcTooltipComponent conteúdo pode ser mais do que apenas texto. Como éIgcTooltipComponent um elemento regular na marcação, você pode aprimorar seu conteúdo adicionando quaisquer elementos que precisar e estilizando-os de acordo.

Show/Hide delay settings

Se quiser controlar o atraso antes de mostrar e esconder,IgcTooltipComponent pode usar asshowDelay propriedades e.hideDelay Ambas as propriedades aceitam um valor numérico que representa o tempo em milissegundos.

<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

O alvoIgcTooltipComponent também pode ser posicionado em relação ao seu elemento alvo com facilidade. Tudo o que você precisa fazer é usar oplacement imóvel junto com uma dasPopoverPlacement opções.

Se aplacement propriedade não estiver definida, o valor padrão estáBottom, que coloca abaixoIgcTooltipComponent do elemento alvo.

Além disso, você pode tornar oIgcTooltipComponent "fixo" usando asticky propriedade, que adiciona um botão de fechar e mantém oIgcTooltipComponent botão visível até o usuário fechá-lo manualmente – seja clicando no botão de fechar ou pressionando aEsc tecla. Esse comportamento substitui o comportamento padrão de hover, impedindo que desapareçaIgcTooltipComponent quando o usuário para de passar o mouse sobre o elemento de destino.

TambémIgcTooltipComponent inclui um indicador de seta opcional que pode ser configurado via propriedadewithArrow. A seta conecta visualmente a dica de ferramenta ao seu elemento âncora e sua posição se ajusta automaticamente com base na dica da ferramentaplacement.

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

No exemplo a seguir, você pode ver uma demonstração de todas as opções de posicionamento da tooltip, comportamento de posicionamento das setas e asticky propriedade em ação:

Triggers

Por padrão, oIgcTooltipComponent é acionado apenas enquanto está pairando sobre o elemento alvo. No entanto, você pode alterar esse comportamento usando asshowTriggers propriedades e,hideTriggers que permitem controlar quando apareceIgcTooltipComponent e quando desaparece. Essas propriedades aceitam nomes de eventos como valores —clickcomo,focus oukeypress— permitindo que você acione osIgcTooltipComponent em diferentes cenários.

Advanced Example

EleIgcTooltipComponent se integra perfeitamente com outros componentes, permitindo criar dicas avançadas que contêm componentes dentro deles. No exemplo a seguir, você pode ver como criamos dicas descritivas usando osIgcListComponent componentes,IgcAvatarComponent,IgcIconComponent,IgcBadgeComponent,IgcButtonComponent,andIgcCardComponent (eIgcCategoryChartComponent componentes).

Additional Properties

Além das propriedades que já abordamos, oIgcTooltipComponent componente oferece uma variedade de propriedades adicionais que permitem configurar melhor seu comportamento, posição e aparência.

Nome	Tipo	Descrição
`open`	booleano	Determina se a dica de ferramenta está visível.
`withArrow`	booleano	Determina se um indicador de seta deve ser renderizado para a dica de ferramenta.
`offset`	número	Define a distância de pixels entre a dica de ferramenta e a sua`anchor`.

Methods

Além de suas propriedades configuráveis, eleIgcTooltipComponent também expõe três métodos que você pode usar:

Nome	Descrição
`show`	Exibe a dica de ferramenta, se ela ainda não estiver mostrada. Se um destino for fornecido, ele definirá o destino como transitório`anchor`.
`hide`	Oculta a dica de ferramenta se ela ainda não estiver oculta.
`toggle`	Alterna a dica de ferramenta entre os estados mostrado e oculto.

Accessibility & ARIA Support

OIgcTooltipComponent projeto foi feito pensando na acessibilidade e inclui os seguintes atributos ARIA:

role- Quando a dica de ferramenta está em seu comportamento padrão,role="tooltip" é aplicada. Se asticky propriedade estiver ativada, o papel muda parastatus.
inert- Alternada dinamicamente com base na visibilidade. Quando a dica de ferramenta fica escondida, ela fica inerte.
aria-atomic- Definir como true, garantindo que todo o conteúdo da tooltip seja anunciado quando for alterado.
aria-live- Definido como educado, indicando aos leitores de tela que as atualizações devem ser anunciadas apenas quando o usuário estiver inativo.

Styling

OIgcTooltipComponent componente expõe duas partes CSS que você pode usar para estilização:

Nome	Descrição
`base`	O wrapper base do componente de dica de ferramenta.
`top, right, bottom, left ...`	A área que contém a seta da dica de ferramenta. O nome da peça corresponde ao valor da propriedade de posicionamento da dica de ferramenta.

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