Componente

Tooltip

Uma diretiva que flutua um rótulo ao lado de qualquer elemento. Mostre texto simples ou atalhos de teclado, posicione-o em qualquer lado e alinhamento, adicione uma seta e offset, abra ao passar o mouse, clicar ou sob seu controle, ajuste os atrasos de abrir/fechar, e projete um template rico com contexto.

Texto e atalho

Any element works

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbButtonComponent, HbTooltipImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-tooltip-basic',
  imports: [HbTooltipImports, HbButtonComponent],
  template: `
    <div class="flex flex-wrap items-center gap-3">
      <button hb-button hbType="secondary" hbTooltip="Add a new photo">Hover me</button>

      <button hb-button hbType="outline" hbTooltip="Save changes" [hbTooltipShortcut]="['⌘', 'S']">
        With shortcut
      </button>

      <span
        hbTooltip="Oak leaves — Black Forest"
        class="cursor-help text-sm underline decoration-dotted underline-offset-4"
      >
        Any element works
      </span>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoTooltipBasicComponent {}

Lado, alinhamento, seta e offset

Gatilho, template, atraso e controlado

Referência de API

[hbTooltip] — content

Propriedade	Descrição	Tipo	Padrão
hbTooltip	O texto do tooltip. A diretiva se anexa ao elemento host em que fica.	string	''
[hbTooltipShortcut]	Uma ou mais teclas renderizadas como chips kbd após o texto.	string \| string[]	[]
[hbTooltipContent] / [hbTooltipContentContext]	Um TemplateRef para conteúdo rico, e o objeto de contexto passado a ele (como $implicit / let-ctx).	TemplateRef \| unknown	null
[hbTooltipClass]	Classes extras mescladas no painel do tooltip.	ClassValue	''

[hbTooltip] — placement & behaviour

Propriedade	Descrição	Tipo	Padrão
[hbTooltipPosition]	Lado preferido; inverte para o oposto quando falta espaço.	'top' \| 'right' \| 'bottom' \| 'left'	'top'
[hbTooltipAlign]	Alinhamento do painel ao longo do lado escolhido.	'start' \| 'center' \| 'end'	'center'
[hbTooltipArrow] / [hbTooltipOffset]	Mostra uma seta apontadora, e define o espaço em pixels entre o gatilho e o painel.	boolean / number	false / 6
[hbTooltipTrigger]	Como abre: ao passar o mouse/focar, ao clicar (fecha com clique fora), ou manual (você controla).	'hover' \| 'click' \| 'manual'	'hover'
[hbTooltipDelay]	Atraso de abrir/fechar em ms — um número para ambos, ou { open, close }.	number \| { open?, close? }	300 / 100
[hbTooltipDisabled]	Impede o tooltip de abrir.	boolean	false
[hbTooltipOpen] / (hbTooltipOpenChange)	Estado aberto controlado (use com trigger "manual"), e um evento emitido ao abrir e fechar.	boolean \| undefined / boolean	undefined
provideHbTooltip(config)	Padrões da aplicação: position, align, trigger, openDelay, closeDelay, offset, arrow.	Provider	—