Descrição

Tooltips exibem informação contextual breve sem deslocar o usuário para outro bloco da tela.

Recursos

Triggers por hover, click e modo manual.
Posicionamento em múltiplas direções.
Suporte a HTML e eventos de ciclo de vida.

Limitações

Tooltips não devem carregar conteúdo extenso.
Uso excessivo gera ruído e dependência de hover.
Fluxos mobile pedem cuidado com trigger e leitura.

{{ tooltipEventLog.isEmpty ? t.pages.tooltip.idle : tooltipEventLog }}

Automatic closing

Os exemplos abaixo continuam fechando com Escape e variam apenas o clique que dispara o fechamento.

Append tooltip in the body

Quando o gatilho vive dentro de uma área com clipping, container="body" tira o balão desse contexto local.

Custom target

O gatilho continua neste botão, mas o balão é posicionado em outro elemento do layout.

HTML and bindings via TemplateRef

O tooltip também pode receber um TemplateRef com bindings do componente hospedeiro.

Open and close delays

O hover pode esperar um pouco para abrir e continuar disponível enquanto o ponteiro entra no próprio balão.

Custom class

Uma classe adicional permite trocar o tratamento visual sem criar outro componente.

Global configuration

Os defaults podem ser escopados por subtree usando LiTooltipConfig como provider local.

O componente envolve qualquer gatilho visual e adiciona exibição contextual com configuração declarativa.

[liTooltip] aplica a API por diretiva diretamente no elemento gatilho.
[text] define o conteúdo do tooltip.
placement aceita topo, direita, base e esquerda.
trigger ou triggers aceitam hover, click e manual.
autoClose aceita true, false, inside e outside.
container="body" tira o balão do contexto local e evita clipping por overflow.
positionTarget permite posicionar o tooltip contra outro seletor ou elemento.
tooltipClass aplica uma classe extra ao balão renderizado.
[liTooltip] também aceita TemplateRef para conteúdo rico com bindings.
[html] habilita renderização rica quando necessário.
[showDelayMs], [hideDelayMs], [openDelay] e [closeDelay] refinam o timing.
LiTooltipConfig fornece defaults injetáveis para uma subtree inteira.
(show), (shown), (hide) e (hidden) expõem o ciclo de vida.

<button
  [liTooltip]="'Tooltip direto no botão'"
  placement="top"
  triggers="hover focus">
  Hover tooltip
</button>

<button
  [liTooltip]="tooltipTemplate"
  triggers="click"
  container="body"
  tooltipClass="tooltip-aurora">
  Tooltip com template
</button>

<template #tooltipTemplate>
  <div class="fw-semibold mb-1">TemplateRef dentro do tooltip</div>
  <div class="small text-white-50">Bindings continuam vivos.</div>
</template>

<button
  #tooltip="liTooltip"
  [liTooltip]="'Ancorado em outro elemento'"
  triggers="manual"
  [positionTarget]="'#target-anchor'"
  (click)="tooltip.toggle()">
  Abrir tooltip manual
</button>

<span id="target-anchor">Âncora visual</span>

@Component(
  providers: [ClassProvider(LiTooltipConfig)],
)
class DemoTooltipDefaults {
  DemoTooltipDefaults(LiTooltipConfig config) {
    config.triggers = 'click';
    config.placement = 'right';
    config.tooltipClass = 'tooltip-config-demo';
  }
}

<li-tooltip
  [text]="'Mostra dicas ao passar o mouse.'"
  placement="top"
  trigger="hover">
  <button class="btn btn-outline-primary" type="button">Hover tooltip</button>
</li-tooltip>

{{ t.pages.tooltip.title }} {{ t.pages.tooltip.subtitle }}