Copiar página como Markdown para IA
Tooltip
Visão Geral
Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplo(s)
Desktop (100%)
Tablet - 768px
iPhone (iOS) - 390x844
Android - 360x800
Compartilhar URL
Mudar fundo
Abrir no StackBlitz
Tela cheia
HTML
Controles
JS
CSS
Console
Angular (Somente leitura)
React (Somente leitura)
Vue (Somente leitura)
Acessibilidade
Recolher controles e código
Formatar código
Resetar código para o estado inicial
Copiar para a área de transferência
Fluxo e sobreposição
O tooltip nunca participa do fluxo da página. Quando a Popover API está disponível, seu conteúdo entra na top
layer; nos demais ambientes usa position: fixed e a camada flutuante 1. A posição é aplicada antes do primeiro
cálculo assíncrono para não provocar reflow.
Tooltips externos são fechados quando um bloqueador abre. Tooltips contidos no diálogo permanecem utilizáveis e, com Popover API, são pintados acima dele pela própria plataforma.
Propriedades
ariaLabel
| Atributo | aria-label |
|---|---|
| Descrição | Nome acessível do popover. Quando omitido, usa o rótulo derivado do estado visual. |
| Tipo | string |
| Valor padrão | null |
customId
| Atributo | custom-id |
|---|---|
| Descrição | Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId(). |
| Tipo | string |
| Valor padrão | generateUniqueId() |
density
| Atributo | density |
|---|---|
| Descrição | Define a densidade visual do componente. - small: Alta densidade (componente menor, mais compacto e com menos espaçamento).- medium: Densidade intermediária, padrão recomendado para a maioria dos casos.- large: Baixa densidade (componente maior, mais espaçamento e altura). |
| 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 |
interaction
| Atributo | interaction |
|---|---|
| Descrição | Modo de interação para exibição do tooltip: 'hover' ou 'click'. |
| Tipo | "click" | "hover" |
| Valor padrão | 'hover' |
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 | Depreciação | Propagação |
|---|---|---|---|
brDidClose | Emitido quando o tooltip fecha. | --- | true |
brDidOpen | Emitido quando o tooltip abre. | --- | true |
Métodos
hide
| Descrição | Oculta o tooltip programaticamente (alias para hideTooltip). |
|---|---|
| Assinatura | hide() => Promise<void> |
| Parâmetros | --- |
hideTooltip
| Descrição | Oculta o tooltip programaticamente. |
|---|---|
| Assinatura | hideTooltip() => Promise<void> |
| Parâmetros | --- |
setTriggerElement
| Descrição | Define um trigger externo para o tooltip. |
|---|---|
| Assinatura | setTriggerElement(element: HTMLElement | null) => Promise<void> |
| Parâmetros | element: |
show
| Descrição | Exibe o tooltip programaticamente (alias para showTooltip). |
|---|---|
| Assinatura | show() => Promise<void> |
| Parâmetros | --- |
showTooltip
| Descrição | Exibe o tooltip programaticamente. |
|---|---|
| Assinatura | showTooltip() => Promise<void> |
| 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. |
