Blazor Tooltip

O componente Ignite UI for Blazor 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.

Getting Started

Antes de usá-losIgbTooltip, você precisa registrá-los da seguinte forma:

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));

Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbTooltip componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

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

<IgbTooltip Anchor="hover-button">
  Congrats you have hovered the button!
</IgbTooltip>

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

Usage

Tooltip target

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

<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button">
  Congrats you have hovered the button!
</IgbTooltip>

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

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

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

<IgbTooltip ShowDelay="600" HideDelay="800">
  Her name is Madelyn James.
</IgbTooltip>

[!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 alvoIgbTooltip 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 abaixoIgbTooltip do elemento alvo.

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

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

<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button" Placement="PopoverPlacement.TopStart" Sticky="true" DisableArrow="true">
  Congrats you have hovered the button!
</IgbTooltip>

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

Advanced Example

EleIgbTooltip 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 osIgbList componentes,IgbAvatar,IgbIcon,IgbBadge,IgbButton,andIgbCard (eIgbCategoryChart componentes).

Additional Properties

Além das propriedades que já abordamos, oIgbTooltip 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, eleIgbTooltip 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

OIgbTooltip 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

OIgbTooltip 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 Blazor Tooltip Example