States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Closed | Not visible | None |
| Opening | Fades in with a 2 px drift | motion-tooltip-enter-duration, motion-tooltip-distance |
| Open | Inverse background, shadow, arrow | color-surface-inverse, color-text-inverse, shadow-overlay |
| Closing | A short fade | motion-tooltip-exit-duration |
Measurements
Section titled “Measurements”| Property | Value | Token |
|---|---|---|
| Maximum width | 240 px | tooltip-max-width |
| Padding | 12 px inline, 6 px block | space-lg, space-sm |
| Corner radius | 8 px | radius-md |
| Distance from the trigger | 4 px | None |
| Arrow | 10 × 10 px, 2 px corners | tooltip-arrow-size, radius-2xs |
Shortcut (Kbd) |
Beside the text, 6 px apart; 6 px end padding after it | space-sm |
| Text style | body-sm |
text.body-sm |
Tokens
Section titled “Tokens”Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--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 |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Open delay | Hover time | motion-tooltip-delay (400 ms) |
None | Unchanged. |
| Enter | opacity 0 → 1 and a 2 px drift (motion.tooltip) |
motion-tooltip-enter-duration (110 ms) |
easing-productive-enter |
The drift becomes 0; the tooltip only fades in. |
| Exit | opacity 1 → 0 |
motion-tooltip-exit-duration (70 ms) |
easing-productive-enter |
Unchanged. |
See Motion for the values.