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 usar o IgbTooltip, você precisa registrá-lo 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 ao IgbTooltip componente. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto de Assembly da Web do Blazor ou no arquivo Pages/_Host.cshtml em um projeto do 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 Blazor IgbTooltip.

<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 a Anchor propriedade do e defina-a IgbTooltip como a ID do elemento de destino.

<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 do IgbTooltip.

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

O IgbTooltip conteúdo pode ser mais do que apenas um simples texto. Como o IgbTooltip é 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 IgbTooltip, você pode usar as ShowDelay 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

The IgbTooltip can also be positioned relative to its target element with ease. All you need to do is use the Placement property along with one of the PopoverPlacement options.

If the Placement property is not set, the default value is Bottom, which places the IgbTooltip below the target element.

Além disso, você pode tornar o IgbTooltip "pegajoso" usando a Sticky propriedade, que adiciona um botão Fechar e mantém o IgbTooltip 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 IgbTooltip desapareça quando o usuário parar de passar o mouse sobre o elemento de destino.

The IgbTooltip also includes an optional arrow indicator that can be configured via the WithArrow property. The arrow visually connects the tooltip to its anchor element and its position automatically adjusts based on the tooltip's Placement.

<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 dica de ferramenta, comportamento de posicionamento da seta e a Sticky propriedade em ação:

Triggers

Por padrão, o IgbTooltip é 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 IgbTooltip aparece e desaparece. Essas propriedades aceitam nomes de eventos como valores, como click, focus ou keypress—permitindo que você acione o IgbTooltip em diferentes cenários.

Advanced Example

O integra-se IgbTooltip perfeitamente com outros componentes, permitindo que você crie dicas de ferramentas avançadas que contêm componentes dentro delas. No exemplo a seguir, você pode ver como criamos dicas de ferramentas descritivas usando os IgbList componentes , IgbAvatar, IgbIcon, IgbBadge,, IgbButton,e IgbCard IgbCategoryChart.

Additional Properties

Além das propriedades que já abordamos, o IgbTooltip 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.
`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, o IgbTooltip 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 IgbTooltip é 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 IgbTooltip 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.
`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