Tooltip
Pequenos labels contextuais que aparecem ao passar o mouse ou focar em um elemento trigger. Use tooltips para fornecer informações breves e complementares.Small contextual labels that appear on hover or focus relative to a trigger element. Use tooltips to provide brief, supplementary information.
Quando usarWhen to use
Use tooltips quandoUse tooltips when
Fornecer informação complementar e não essencial ao passar o mouse ou focar: labels de buttons de ícone, explicacoes de abreviações, esclarecimentos breves.Providing supplementary, non-essential info on hover or focus: icon button labels, abbreviation explanations, brief clarifications.
Não use tooltips quandoDon't use tooltips when
A informação e essencial (torne-a visível por padrão), o conteúdo e interativo — links, buttons ou formulários (use Popover — futuro), ou o conteúdo e longo (use Modal).The information is essential (make it visible by default), the content is interactive — links, buttons, or forms (use Popover — future), or the content is long (use Modal).
AnatomiaAnatomy
Edit document
1
2
3
4
1 Trigger — o elemento que ativa o tooltip ao passar o mouse ou focar.
2 Container do tooltip (
3 Seta — pseudo-elemento CSS apontando para o trigger.
4 Conteúdo — somente texto, sem elementos interativos. 1 Trigger — the element that activates the tooltip on hover/focus.
2 Tooltip container (
3 Arrow — CSS pseudo-element pointing toward the trigger.
4 Content — text only, no interactive elements.
2 Container do tooltip (
.ds-tooltip) — fundo escuro, posicionado relativo ao trigger.3 Seta — pseudo-elemento CSS apontando para o trigger.
4 Conteúdo — somente texto, sem elementos interativos. 1 Trigger — the element that activates the tooltip on hover/focus.
2 Tooltip container (
.ds-tooltip) — dark background, positioned relative to trigger.3 Arrow — CSS pseudo-element pointing toward the trigger.
4 Content — text only, no interactive elements.
PosiçõesPositions
O conteúdo do tooltip aparece no lado especificado do trigger. A seta (via ::before) aponta para o elemento trigger.The tooltip content appears on the specified side of the trigger. The arrow (via ::before) points toward the trigger element.
Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right
<div class="ds-tooltip ds-tooltip--top">
<button class="ds-btn ds-btn--outline ds-btn--sm" aria-describedby="tip-top">Top</button>
<span class="ds-tooltip__content" id="tip-top" role="tooltip">Tooltip on top</span>
</div>
<div class="ds-tooltip ds-tooltip--right">
<button class="ds-btn ds-btn--outline ds-btn--sm" aria-describedby="tip-right">Right</button>
<span class="ds-tooltip__content" id="tip-right" role="tooltip">Tooltip on right</span>
</div>
<div class="ds-tooltip ds-tooltip--bottom">
<button class="ds-btn ds-btn--outline ds-btn--sm" aria-describedby="tip-bottom">Bottom</button>
<span class="ds-tooltip__content" id="tip-bottom" role="tooltip">Tooltip on bottom</span>
</div>
<div class="ds-tooltip ds-tooltip--left">
<button class="ds-btn ds-btn--outline ds-btn--sm" aria-describedby="tip-left">Left</button>
<span class="ds-tooltip__content" id="tip-left" role="tooltip">Tooltip on left</span>
</div>Com buttons de íconeWith icon buttons
Tooltips são especialmente úteis em buttons icon-only para esclarecer sua função.Tooltips are especially useful on icon-only buttons to clarify their purpose.
Edit
Delete
<div class="ds-tooltip ds-tooltip--top">
<button class="ds-btn ds-btn--ghost ds-btn--icon-only ds-btn--sm"
aria-describedby="tip-edit" aria-label="Edit">
<svg class="ds-btn__icon" ...></svg>
</button>
<span class="ds-tooltip__content" id="tip-edit" role="tooltip">Edit</span>
</div>Boas práticasBest practices
Settings
Faça
Use tooltips em buttons icon-only para esclarecer sua função. Mantenha abaixo de 80 caracteres.Use tooltips on icon-only buttons to clarify their purpose. Keep under 80 characters.
Click here to open settings where you can change your theme, language, and notification preferences
Não faça
Colocar conteúdo longo, links, buttons ou formulários dentro de tooltips.Put long content, links, buttons, or forms inside tooltips.
Edit document
Faça
Forneça informação complementar e não essencial via tooltips.Provide supplementary, non-essential information via tooltips.
Critical information only visible on hover
Não faça
Fazer tooltips a única forma de comunicar informação crítica. Conteúdo essencial deve ser sempre visível.Make tooltips the only way to convey critical info. Essential content should be always visible.
Diretrizes de conteúdoContent guidelines
| RegraRule | ExemploExample |
|---|---|
| Abaixo de 80 caracteresUnder 80 characters | "Editar documento" — não um parágrafo inteiro"Edit document" — not a full paragraph |
| Caixa de sentençaSentence case | "Copiar para área de transferência" — não "Copiar Para Área De Transferência""Copy to clipboard" — not "Copy To Clipboard" |
| Sem ponto para fragmentosNo period for fragments | "Excluir item" — não "Excluir item.""Delete item" — not "Delete item." |
| Somente texto — sem conteúdo interativoText only — no interactive content | Sem links, buttons ou elementos de formulário dentro de tooltipsNo links, buttons, or form elements inside tooltips |
Mapeamento de tokensToken mapping
| PropriedadeProperty | Token (semantic) | Variável CSSCSS variable |
|---|---|---|
| fundobackground | semantic.background.inverse | --ds-background-inverse |
| textotext | semantic.content.inverse | --ds-content-inverse |
| font-size | foundation.typography.font.size.12 | --ds-font-size-12 |
| padding | foundation.spacing.64 / foundation.spacing.32 | --ds-dimension-4 / --ds-dimension-8 |
| border-radius | foundation.radius.4 | --ds-radius-4 |
| z-index | foundation.z.50 | --ds-z-50 |
Classes CSSCSS classes
| ClasseClass | DescriçãoDescription |
|---|---|
ds-tooltip | Wrapper ao redor do trigger e conteúdo do tooltipWrapper around trigger and tooltip content |
ds-tooltip__content | O elemento label do tooltip (com seta via ::before)The tooltip label element (with arrow via ::before) |
ds-tooltip--top | Posiciona o tooltip acima do triggerPosition tooltip above the trigger |
ds-tooltip--right | Posiciona o tooltip à direitaPosition tooltip to the right |
ds-tooltip--bottom | Posiciona o tooltip abaixo do triggerPosition tooltip below the trigger |
ds-tooltip--left | Posiciona o tooltip à esquerdaPosition tooltip to the left |
Interação por tecladoKeyboard interaction
| TeclaKey | AçãoAction |
|---|---|
Tab (para o trigger)(to trigger) | Mostra o tooltip quando o trigger recebe focoShows tooltip when trigger receives focus |
Escape | Oculta o tooltipHides tooltip |
Tab (saindo)(away) | Oculta o tooltip quando o foco sai do triggerHides tooltip when focus leaves the trigger |
AccessibilityAccessibility
| Critério WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 1.4.13 Content on Hover/Focus (AA) | O tooltip deve ser dispensável (Escape), acessível ao mouse (pode entrar no tooltip) e persistente (permanece enquanto hover/focus ativo)Tooltip must be dismissable (Escape), hoverable (mouse can enter tooltip), and persistent (stays while hovered/focused) | ✓ |
| 4.1.2 Name, Role, Value (A) | Elemento tooltip possui role="tooltip", trigger vinculado via aria-describedbyTooltip element has role="tooltip", trigger linked via aria-describedby | ✓ |
Resumo de atributos ARIAARIA attributes summary
role="tooltip" — no elemento de conteúdo do tooltip.aria-describedby — no trigger, apontando para o id do tooltip.Tooltips devem aparecer tanto em
hover quanto em focus, e ser dispensáveis com Escape.
role="tooltip" — on the tooltip content element.aria-describedby — on the trigger, pointing to the tooltip's id.Tooltips must appear on both
hover and focus, and be dismissible with Escape.