React Tooltip | Infragistics

O componente Ignite UI for React 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 o IgrTooltipComponent, primeiro, você precisa instalar o Ignite UI for React executando o seguinte comando:

npm install igniteui-react

Depois disso, você precisa importar o IgrTooltipComponent componente e seu CSS necessário da seguinte maneira:

import { IgrTooltip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

<IgrTooltip anchor="hover-button">
  Congrats you have hovered the button!
</IgrTooltip>

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

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

Usage

Tooltip target

Para anexar uma dica de ferramenta ao elemento desejado, use a anchor propriedade no elemento >IgrTooltip<. 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.

<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button">
  Congrats you have hovered the button!
</IgrTooltip>

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

const anchor = document.querySelector('#hover-button') as IgrButton;
const tooltip = document.querySelector('#tooltip') as IgrTooltip;
tooltip.anchor = anchor;

<IgrTooltip id="tooltip">
  Congrats you have hovered the button!
</IgrTooltip>
<IgrButton id="hover-button">Hover me</IgrButton>

O conteúdo da dica de ferramenta é definido colocando o conteúdo personalizado entre as marcas de abertura e fechamento do elemento >IgrTooltip<.

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

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

<IgrTooltip message="This is my custom content here."></IgrTooltip>

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.

<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" message="I will be hidden.">
  I will be shown!
</IgrTooltip>

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

O IgrTooltipComponent conteúdo pode ser mais do que apenas um simples texto. Como o IgrTooltipComponent é 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 o IgrTooltipComponent, você pode usar as showDelay propriedades e hideDelay. Ambas as propriedades aceitam um valor numérico que representa o tempo em milissegundos.

<IgrTooltip show-delay="600" hide-delay="800">
  Her name is Madelyn James.
</IgrTooltip>

[!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 também pode ser posicionado IgrTooltipComponent em relação ao seu elemento alvo 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", que coloca o IgrTooltipComponent acima do elemento de destino.

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

<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" placement="top-start" sticky>
  Congrats you have hovered the button!
</IgrTooltip>

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, o IgrTooltipComponent é acionado apenas ao passar o mouse sobre o elemento de destino. No entanto, você pode alterar esse comportamento usando o showTriggers e hideTriggers propriedades, que permitem controlar quando o IgrTooltipComponent aparece e desaparece. Essas propriedades aceitam nomes de eventos como valores, como click, focus ou keypress—permitindo que você acione o IgrTooltipComponent em diferentes cenários.

Additional Properties

Além das propriedades que já abordamos, o IgrTooltipComponent componente 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, o IgrTooltipComponent 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

O IgrTooltipComponent é construído 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 IgrTooltipComponent 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);
}

React dica de ferramenta

Ignite UI for React Tooltip Example