@@ -30,18 +29,18 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
| Class | Property | Color token |
| --------------------------- | ---------------- | ------------- |
-| `.bx--tooltip__trigger svg` | background-color | `$inverse-02` |
-| `.bx--tooltip--icon` | background-color | `$inverse-02` |
-| `p` | text color | `$inverse-01` |
+| Trigger icon | background-color | `$icon-primary` |
+| Container | background-color | `$background-inverse` |
+| Text | color | `$text-inverse` |
### Definition tooltip
| Class | Property | Color token |
| -------------------------- | ---------------- | ----------------- |
-| `.bx--tooltip__label` | text color | `$text-02` |
-| `.bx--tooltip__trigger` | border-bottom | `$interactive-04` |
-| `.bx--tooltip--definition` | background-color | `$inverse-02` |
-| `p` | text color | `$inverse-01` |
+| Label | color | `$text-secondary` |
+| Dotted underline | border-bottom | `$interactive` |
+| Container | background-color | `$background-inverse` |
+| Text | color | `$text-inverse` |
## Typography
@@ -49,8 +48,8 @@ Tooltip labels and text should be set in sentence case.
| Property | Font-size (px/rem) | Font-weight | Type token |
| --------------------- | ------------------ | ------------- | ---------------- |
-| `.bx--tooltip__label` | 12 / 0.75 | Regular / 400 | `$label-01` |
-| `p` | 14 / 0.875 | Regular / 400 | `$body-short-01` |
+| Label | 12 / 0.75 | Regular / 400 | `$label-01` |
+| Body copy | 14 / 0.875 | Regular / 400 | `$body-short-01` |
## Structure
@@ -59,13 +58,13 @@ contain.
### Interactive tooltip
-| Class | Property | px / rem | Spacing token |
+| Element | Property | px / rem | Spacing token |
| --------------------------- | ------------- | -------- | ------------- |
-| `.bx--tooltip` | max-width | 240 / 15 | – |
-| `.bx--tooltip__trigger svg` | height, width | 16 / 1 | – |
-| `.bx--tooltip__trigger` | margin-left | 8 / 0.5 | `$spacing-03` |
-| `.bx--tooltip--shown` | padding | 16 / 1 | `$spacing-05` |
-| `.bx--tooltip` | margin-top | 8 / 0.5 | `$spacing-03` |
+| Container | max-width | 240 / 15 | – |
+| | padding | 16 / 1 | `$spacing-05` |
+| | margin-top | 8 / 0.5 | `$spacing-03` |
+| Trigger icon | height, width | 16 / 1 | – |
+| | margin-left | 8 / 0.5 | `$spacing-03` |
@@ -79,13 +78,13 @@ contain.
### Definition tooltip
-| Class | Property | px / rem | Spacing token |
-| ------------------------------------------------------------------------ | --------------------------- | -------- | ------------- |
-| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | max-width | 176 / 11 | – |
-| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |
-| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
-| `.bx--tooltip__trigger` | border-bottom | 1px | – |
-| `.bx--tooltip__caret` | margin-top | 4px | `$spacing-02` |
+| Class | Property | px / rem | Spacing token |
+| ------------ | --------------------------- | -------- | ------------- |
+| Container | max-width | 176 / 11 | – |
+| | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| Underline | border-bottom | 1px | – |
+| Caret | margin-top | 4px | `$spacing-02` |
@@ -99,12 +98,12 @@ contain.
### Icon tooltip
-| Class | Property | px / rem | Spacing token |
-| -------------------------------------------------------------------------- | --------------------------- | --------- | ------------- |
-| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | max-width | 176 / 11 | – |
-| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
-| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
-| `.bx--tooltip__caret` | margin-top | 8 / 0.5 | `$spacing-03` |
+| Class | Property | px / rem | Spacing token |
+| ---------- | --------------------------- | --------- | ------------- |
+| Container | max-width | 176 / 11 | – |
+| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
+| Caret | margin-top | 8 / 0.5 | `$spacing-03` |