React dica de ferramenta

    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.

    Ignite UI for React Tooltip Example

    Começando

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

    npm install igniteui-react

    Depois disso, você precisa importar oIgrTooltip componente e seu CSS necessário da seguinte forma:

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

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

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

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

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

    Usage

    Tooltip target

    Para anexar uma dica de ferramenta ao elemento desejado, use aanchor propriedade de eIgrTooltip defina para o ID do elemento alvo.

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

    Tooltip content

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

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

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

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

    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.

    <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 ranhuras ("Eu serei mostrado!") será exibido em vez do valor damessage propriedade.

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

    <IgrTooltip showDelay="600" hideDelay="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 alvoIgrTooltip 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 abaixoIgrTooltip do elemento alvo.

    Além disso, você pode tornar oIgrTooltip "fixo" usando asticky propriedade, que adiciona um botão de fechar e mantém oIgrTooltip 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çaIgrTooltip quando o usuário para de passar o mouse sobre o elemento de destino.

    TambémIgrTooltip 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.

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

    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, oIgrTooltip é 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 apareceIgrTooltip e quando desaparece. Essas propriedades aceitam nomes de eventos como valores —clickcomo,focus oukeypress— permitindo que você acione osIgrTooltip em diferentes cenários.

    Advanced Example

    EleIgrTooltip 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 osIgrList componentes,IgrAvatar,IgrIcon,IgrBadge,IgrButton,andIgrCard (eIgrCategoryChart componentes).

    Additional Properties

    Além das propriedades que já abordamos, oIgrTooltip 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 suaanchor.

    Methods

    Além de suas propriedades configuráveis, eleIgrTooltip 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órioanchor.
    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

    OIgrTooltip 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

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

    API References

    Additional Resources