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 a dica de ferramenta, primeiro você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Depois disso, você precisa importar o Tooltip, seu 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);

Agora você pode começar com uma configuração básica da Web Components Tooltip.

<igc-tooltip anchor="hover-button">
  Congrats you've hovered the button!
</igc-tooltip>

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

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

Usage

Tooltip target

Para anexar uma dica de ferramenta ao elemento desejado, use a anchor <igc-tooltip> propriedade no elemento. Essa propriedade aceita uma ID de elemento ou uma referência direta a um elemento. Ao usar uma referência de ID, basta definir a anchor propriedade como a ID do elemento de destino.

<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 <igc-tooltip> tags de abertura e fechamento do elemento.

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

Como alternativa, para definir texto simples, você pode usar a message propriedade.

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

Se você usar as duas abordagens (conteúdo com slot e propriedade message), o conteúdo com slot terá prioridade e o message valor será ignorado.

<igc-button>Hover me</igc-button>
<igc-tooltip message="I will be hidden.">
  I will be shown!
</igc-tooltip>

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

O conteúdo da dica de ferramenta pode ser mais do que apenas um texto simples. 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.

Show/Hide delay settings

Se você quiser controlar o atraso antes de mostrar e ocultar a dica de ferramenta, poderá usar as showDelay 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

A dica de ferramenta também pode ser posicionada em relação ao seu elemento de destino com facilidade. Tudo o que você precisa fazer é usar a placement propriedade junto com uma das seguintes opções de posição: top, top-start, top-end, bottom, bottom-start,, bottom-end, right-end left left-start right right-start,, left-end

Se a placement propriedade não estiver definida, o valor padrão será "top", o que coloca a dica de ferramenta acima do elemento de destino.

Além disso, você pode tornar a dica de ferramenta "fixa" usando a sticky propriedade, que adiciona um botão Fechar e mantém a dica de ferramenta visível até que o usuário a feche manualmente - clicando no botão Fechar ou pressionando a Esc tecla. Esse comportamento substitui o comportamento de foco padrão, impedindo que a dica de ferramenta desapareça quando o usuário parar de passar o mouse sobre o elemento de destino.

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

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

Triggers

Por padrão, a dica de ferramenta é acionada somente ao passar o mouse sobre o elemento de destino. No entanto, você pode alterar esse comportamento usando as showTriggers propriedades e hideTriggers, que permitem controlar quando a dica de ferramenta aparece e desaparece. Essas propriedades aceitam nomes de eventos como valores, keypress como click ou focus, permitindo que você acione a dica de ferramenta em diferentes cenários.

Additional Properties

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

Nome	Tipo	Descrição
`open`	booleano	Determina se a dica de ferramenta está visível.
`disableArrow`	booleano	Se definido como`true`, desativa o indicador de seta na 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, a dica de ferramenta 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

A dica de ferramenta foi criada com a acessibilidade em mente e inclui os seguintes atributos ARIA:

role- Quando a dica de ferramenta está em seu comportamento padrão, role="tooltip" é aplicada. Se a sticky propriedade estiver habilitada, a função será alterada para status.
inert- Alternado dinamicamente com base na visibilidade. Quando a dica de ferramenta está oculta, ela se torna inerte.
aria-atomic- Defina como true, garantindo que todo o conteúdo da dica de ferramenta seja anunciado quando for alterado.
aria-live- Defina como educado, indicando aos leitores de tela que as atualizações devem ser anunciadas somente quando o usuário estiver ocioso.

Styling

O IgcTooltipComponent componente expõe duas partes CSS que você pode usar para estilizar:

Nome	Descrição
`base`	O wrapper base do componente de dica de ferramenta.
`bottom`	A área que contém a seta 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