Tooltip
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Densidade
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Posição
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Estado
Carregando exemplo
Formatar código
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
customId
| Atributo | custom-id |
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId. |
| Tipo | string |
| Valor padrão | Helpers.generateUniqueId() |
density
| Atributo | density |
| Descrição | Define a densidade visual do componente. - small: Baixa densidade (componente maior, mais espaçamento e altura).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Alta densidade (componente menor, menos espaçamento e altura).> Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam density. |
| Tipo | "large" | "medium" | "small" |
| Valor padrão | 'medium' |
hideDelay
| Atributo | hide-delay |
| Descrição | Atraso em milissegundos antes de ocultar. |
| Tipo | number |
| Valor padrão | null |
isAutoVisible
| Atributo | is-auto-visible |
| Descrição | Exibe automaticamente sem interação quando true; caso contrário, depende do acionador. |
| Tipo | boolean |
| Valor padrão | false |
position
| Atributo | position |
| Descrição | Posição do tooltip em relação ao acionador. |
| Tipo | "bottom" | "left" | "right" | "top" |
| Valor padrão | 'top' |
showDelay
| Atributo | show-delay |
| Descrição | Atraso em milissegundos antes de exibir. |
| Tipo | number |
| Valor padrão | null |
state
| Atributo | state |
| Descrição | Estado visual do tooltip: 'info', 'warning', 'error', 'danger' ou 'success'. |
| Tipo | "danger" | "error" | "info" | "success" | "warning" |
| Valor padrão | 'info' |
type
| Atributo | type |
| Descrição | Tipo do tooltip: 'standard' (simples) ou 'popover' (mais rico, com fechamento por interação). |
| Tipo | "popover" | "standard" |
| Valor padrão | 'standard' |
Slots
| Nome | Descrição |
|---|---|
"content" | Slot para o conteúdo exibido no tooltip. |
"trigger" | Slot para o elemento que aciona a exibição do tooltip. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidClose | Emitido quando o tooltip fecha. | true |
brDidOpen | Emitido quando o tooltip abre. | true |
Métodos
hide
| Assinatura | hide() => Promise<void> |
| Descrição | Oculta o tooltip programaticamente (alias para hideTooltip). |
| Parâmetros | --- |
hideTooltip
| Assinatura | hideTooltip() => Promise<void> |
| Descrição | Oculta o tooltip programaticamente. |
| Parâmetros | --- |
setTriggerElement
| Assinatura | setTriggerElement(element: HTMLElement | null) => Promise<void> |
| Descrição | Define um trigger externo para o tooltip. |
| Parâmetros | element: |
show
| Assinatura | show() => Promise<void> |
| Descrição | Exibe o tooltip programaticamente (alias para showTooltip). |
| Parâmetros | --- |
showTooltip
| Assinatura | showTooltip() => Promise<void> |
| Descrição | Exibe o tooltip programaticamente. |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"arrow" | Seta indicativa do tooltip. |
"container" | Wrapper principal do tooltip. |
"content" | Área de conteúdo do tooltip. |
"trigger" | Área do acionador do tooltip. |