Bileşenler

Tooltip

Bir öğenin yanında üzerine gelince ve klavye odağında görünen kısa açıklama.

Storybook: Storybook
Kaynak kod: Kaynak kod

Durumlar

Durum	Görsel değişiklik	Token’lar
Kapalı	Görünmez	Yok
Açılıyor	2 px kayarak belirir	`motion-tooltip-enter-duration`, `motion-tooltip-distance`
Açık	Ters zemin, gölge, ok	`color-surface-inverse`, `color-text-inverse`, `shadow-overlay`
Kapanıyor	Kısa sönme	`motion-tooltip-exit-duration`

Ölçüler

Özellik	Değer	Token
En fazla genişlik	240 px	`tooltip-max-width`
İç boşluk	12 px yatay, 6 px dikey	`space-lg`, `space-sm`
Köşe yarıçapı	8 px	`radius-md`
Tetikleyiciye uzaklık	4 px	Yok
Ok	10 × 10 px, 2 px köşe	`tooltip-arrow-size`, `radius-2xs`
Kısayol (`Kbd`)	Metnin yanında, 6 px ara; sonrasında 6 px iç boşluk	`space-sm`
Yazı stili	`body-sm`	`text.body-sm`

Token’lar

Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.

Token	Örnek	Açık mod	Koyu mod
`--bigbang-tooltip-max-width`		`240px240px240px`	`240px240px240px`
`--bigbang-color-surface-inverse`		`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-text-inverse`		`#ffffff#ffffff#ffffff`	`#171717#171717#171717`
`--bigbang-radius-md`		`8px8px8px`	`8px8px8px`
`--bigbang-radius-2xs`		`2px2px2px`	`2px2px2px`
`--bigbang-tooltip-arrow-size`		`10px10px10px`	`10px10px10px`
`--bigbang-shadow-overlay`		`0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)`	`0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`
`--bigbang-space-sm`		`6px6px6px`	`6px6px6px`
`--bigbang-motion-tooltip-delay`		`0.4s0.4s0.4s`	`0.4s0.4s0.4s`
`--bigbang-motion-tooltip-enter-duration`		`0.11s0.11s0.11s`	`0.11s0.11s0.11s`
`--bigbang-motion-tooltip-exit-duration`		`0.07s0.07s0.07s`	`0.07s0.07s0.07s`
`--bigbang-motion-tooltip-distance`		`2px2px2px`	`2px2px2px`

Hareket ve etkileşim

Etkileşim	Özellik	Süre token’ı	Easing token’ı	Hareketi azaltma
Açılma gecikmesi	Üzerine gelme süresi	`motion-tooltip-delay` (400 ms)	Yok	Değişmez.
Giriş	`opacity` 0 → 1 ve 2 px kayma (`motion.tooltip`)	`motion-tooltip-enter-duration` (110 ms)	`easing-productive-enter`	Kayma 0 olur; ipucu yalnızca belirir.
Çıkış	`opacity` 1 → 0	`motion-tooltip-exit-duration` (70 ms)	`easing-productive-enter`	Değişmez.

Değerler için Hareket sayfasına bakın.