{"componentChunkName":"component---src-pages-components-tooltip-style-mdx","path":"/components/tooltip/style/","result":{"pageContext":{"frontmatter":{"title":"Tooltip","description":"Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/tooltip/style.mdx","titleType":"prepend","MdxNode":{"id":"01c309e0-75d0-51a9-8bdb-d29f2c068864","children":[],"parent":"16baa5a5-05d1-5988-81e4-5b4b31dcd4f7","internal":{"content":"---\ntitle: Tooltip\ndescription: Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\n### Interactive tooltip\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ------------- |\n| `.bx--tooltip__label` | text color | `$text-02` |\n| `.bx--tooltip__trigger` | svg | `$icon-01` |\n| `.bx--tooltip--shown` | background-color | `$inverse-02` |\n| `.bx--tooltip__caret` | background-color | `$inverse-02` |\n| `p` | text color | `$inverse-01` |\n\n\n\n\n\n
\n\nExample of closed and open states for a tooltip\n\n### Icon tooltip\n\n| Class | Property | Color token |\n| --------------------------- | ---------------- | ------------- |\n| `.bx--tooltip__trigger svg` | background-color | `$inverse-02` |\n| `.bx--tooltip--icon` | background-color | `$inverse-02` |\n| `p` | text color | `$inverse-01` |\n\n### Definition tooltip\n\n| Class | Property | Color token |\n| -------------------------- | ---------------- | ----------------- |\n| `.bx--tooltip__label` | text color | `$text-02` |\n| `.bx--tooltip__trigger` | border-bottom | `$interactive-04` |\n| `.bx--tooltip--definition` | background-color | `$inverse-02` |\n| `p` | text color | `$inverse-01` |\n\n## Typography\n\nTooltip labels and text should be set in sentence case.\n\n| Property | Font-size (px/rem) | Font-weight | Type token |\n| --------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--tooltip__label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `p` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nAll tooltip types have a varying height based on the amount of content they contain.\n\n### Interactive tooltip\n\n| Class | Property | px / rem | Spacing token |\n| --------------------------- | ------------- | -------- | ------------- |\n| `.bx--tooltip` | max-width | 240 / 15 | – |\n| `.bx--tooltip__trigger svg` | height, width | 16 / 1 | – |\n| `.bx--tooltip__trigger` | margin-left | 8 / 0.5 | `$spacing-03` |\n| `.bx--tooltip--shown` | padding | 16 / 1 | `$spacing-05` |\n| `.bx--tooltip` | margin-top | 8 / 0.5 | `$spacing-03` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for an interactive tooltip | px / rem\n\n\n### Definition tooltip\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------------------------------------------ | --------------------------- | -------- | ------------- |\n| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | max-width | 176 / 11 | – |\n| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--tooltip__trigger` | border-bottom | 1px | – |\n| `.bx--tooltip__caret` | margin-top | 4px | `$spacing-02` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a definition tooltip | px / rem\n\n\n### Icon tooltip\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------------------------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | max-width | 176 / 11 | – |\n| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |\n| `.bx--tooltip__caret` | margin-top | 8 / 0.5 | `$spacing-03` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for an icon tooltip | px / rem\n\n\n### Placement\n\nTooltips should be placed below the tooltip icon unless it is within the height of the tooltip box plus 16px / 1rem of the bottom of the page. In that instance, the tooltip should appear above the icon or defined word. On mobile, tooltips can only appear below the tooltip icon.\n\n\n\n\n\n
\n\nPlacement examples for a tooltip\n","type":"Mdx","contentDigest":"5c2cb472a526a05dfc7d06a8a1f9f900","counter":1601,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tooltip","description":"Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Tooltip\ndescription: Tooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\n### Interactive tooltip\n\n| Class | Property | Color token |\n| ----------------------- | ---------------- | ------------- |\n| `.bx--tooltip__label` | text color | `$text-02` |\n| `.bx--tooltip__trigger` | svg | `$icon-01` |\n| `.bx--tooltip--shown` | background-color | `$inverse-02` |\n| `.bx--tooltip__caret` | background-color | `$inverse-02` |\n| `p` | text color | `$inverse-01` |\n\n\n\n\n\n
\n\nExample of closed and open states for a tooltip\n\n### Icon tooltip\n\n| Class | Property | Color token |\n| --------------------------- | ---------------- | ------------- |\n| `.bx--tooltip__trigger svg` | background-color | `$inverse-02` |\n| `.bx--tooltip--icon` | background-color | `$inverse-02` |\n| `p` | text color | `$inverse-01` |\n\n### Definition tooltip\n\n| Class | Property | Color token |\n| -------------------------- | ---------------- | ----------------- |\n| `.bx--tooltip__label` | text color | `$text-02` |\n| `.bx--tooltip__trigger` | border-bottom | `$interactive-04` |\n| `.bx--tooltip--definition` | background-color | `$inverse-02` |\n| `p` | text color | `$inverse-01` |\n\n## Typography\n\nTooltip labels and text should be set in sentence case.\n\n| Property | Font-size (px/rem) | Font-weight | Type token |\n| --------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--tooltip__label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `p` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nAll tooltip types have a varying height based on the amount of content they contain.\n\n### Interactive tooltip\n\n| Class | Property | px / rem | Spacing token |\n| --------------------------- | ------------- | -------- | ------------- |\n| `.bx--tooltip` | max-width | 240 / 15 | – |\n| `.bx--tooltip__trigger svg` | height, width | 16 / 1 | – |\n| `.bx--tooltip__trigger` | margin-left | 8 / 0.5 | `$spacing-03` |\n| `.bx--tooltip--shown` | padding | 16 / 1 | `$spacing-05` |\n| `.bx--tooltip` | margin-top | 8 / 0.5 | `$spacing-03` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for an interactive tooltip | px / rem\n\n\n### Definition tooltip\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------------------------------------------ | --------------------------- | -------- | ------------- |\n| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | max-width | 176 / 11 | – |\n| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | padding-top, padding bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--tooltip--definition__bottom`
`.bx--tooltip--definition__top` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--tooltip__trigger` | border-bottom | 1px | – |\n| `.bx--tooltip__caret` | margin-top | 4px | `$spacing-02` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a definition tooltip | px / rem\n\n\n### Icon tooltip\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------------------------------------------------------- | --------------------------- | --------- | ------------- |\n| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | max-width | 176 / 11 | – |\n| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n| `.bx--tooltip--icon__top:before`
`.bx--tooltip--icon__bottom:before` | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |\n| `.bx--tooltip__caret` | margin-top | 8 / 0.5 | `$spacing-03` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for an icon tooltip | px / rem\n\n\n### Placement\n\nTooltips should be placed below the tooltip icon unless it is within the height of the tooltip box plus 16px / 1rem of the bottom of the page. In that instance, the tooltip should appear above the icon or defined word. On mobile, tooltips can only appear below the tooltip icon.\n\n\n\n\n\n
\n\nPlacement examples for a tooltip\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/tooltip/style.mdx"}}}}