Bileşenler
Tooltip
Bir öğenin yanında hover ve klavye odağında görünen kısa bir etiket.
Playground
Bağlantıyı kopyalar
Figma varyantı
👉 Position=Bottom
🤥 Beak=True
🎛 Type=DefaultKonumlar
On iki konum: öğenin üstü, altı, önü ya da arkası; ortalı ya da bir kenara hizalı. Ok öğeyi gösterir ve gizlenebilir.
Position=BottomPosition=TopPosition=RightPosition=Left
Tokenlar
| Part | Token |
|---|---|
| Background | --color-surface-level-3 |
| Line | --border-width --color-surface-level-4 |
| Padding | --space-tiny --space-small |
| Radius | --radius-form-element-small |
| Text | --text-ui-text-small-regular, --color-foreground-high-emphasis |
Figma notları
- 👉 Position okun bulunduğu kenarı adlandırır; Position=Bottom öğenin üstündeki tooltip’tir (placement="top").
- Metin bağlı olmayan 12px Medium bir stil; kod ui/text small/regular kullanır.
- Ok iki vektörden oluşuyor (18×8); kod aynı boyutta, 45° döndürülmüş 12px bir kare çizer.
- Hug Content genişliği yalnızca 2px değiştiriyor; kod her zaman içeriğe sarılır ve 200px’te satır kırar.
- Type=HTML, surface/level-2 oklu bir .tooltip html bileşeni; kod content içinde herhangi bir içerik alır.
- z-index tokenı yok; tooltip absolute konumlanır ve kayan bir üst öğe tarafından kesilebilir.
Figma’dan koda
| Figma | React |
|---|---|
| 👉 Position = Bottom / Bottom Left / Bottom Right | placement='top' / 'top-start' / 'top-end' |
| 👉 Position = Top / Top Left / Top Right | placement='bottom' / 'bottom-start' / 'bottom-end' |
| 👉 Position = Left / Left Top / Left Bottom | placement='right' / 'right-start' / 'right-end' |
| 👉 Position = Right / Right Top / Right Bottom | placement='left' / 'left-start' / 'left-end' |
| 🤥 Beak = False | beak={false} |
| 🎛 Type = HTML | content={<…/>} |