Componentes/Tooltip

Tooltip

Balão de ajuda contextual com seta direcional. 8 direções. Padding 12×8px, bg-primary, max-width 200px.

Formulário / Controles

Figma: 1618:23706

Preview

Direções (Top)

Bottom

Laterais

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<!-- TopCenter -->
<div class="trdr-tooltip trdr-tooltip-top-center" role="tooltip">
  <div class="trdr-tooltip-content">
    <span>Tooltip text</span>
    <span class="trdr-tooltip-hotkey">⌘V</span>
  </div>
  <span class="trdr-tooltip-arrow trdr-tooltip-arrow-up" aria-hidden="true"></span>
</div>

<!-- BottomLeft -->
<div class="trdr-tooltip trdr-tooltip-bottom-left" role="tooltip">
  <div class="trdr-tooltip-content">
    <span>Alinhar à esquerda</span>
  </div>
  <span class="trdr-tooltip-arrow trdr-tooltip-arrow-down" aria-hidden="true"></span>
</div>

Dimensões

Variante	Largura	Altura
Padding H	`12px`	`—`
Padding V	`—`	`8px`
Seta (caret)	`12px`	`6px`
Max width	`200px`	`—`

Props / Variantes

Prop	Tipo	Valores
`Direction`	enum	`TopCenterTopLeftTopRightBottomCenterBottomLeftBottomRightRightLeft`
`Hotkey`	boolean	`truefalse`

Tokens Utilizados

Propriedade	Token	Valor
Background	`bg-primary`	`#0E0E0E`
Texto	`content-primary`	`#FFFFFF`
Hotkey	`content-secondary`	`#E8E8E8`
Seta	`bg-primary`	`#0E0E0E`
Shadow	`—`	`drop-shadow 0.25px + 1.5px + 6px`

Anatomia

[div role=tooltip position=relative border-radius=5px]
  └── [Content: flex gap=4px padding=8px/12px]
        └── [Texto flex=1]
        └── [Hotkey opcional]
  └── [Seta 12×6px CSS clip-path absolute]