{"componentChunkName":"component---src-pages-components-tooltip-usage-mdx","path":"/components/tooltip/usage/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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"]},"relativePagePath":"/components/tooltip/usage.mdx","titleType":"prepend","MdxNode":{"id":"6de32c10-c468-5eb7-9e97-91c80effdc6a","children":[],"parent":"f004acb8-a498-50e4-98e8-98457d8f4e69","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']\n---\n\n## General guidance\n\nTooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information. Keep tooltips short.\n\n## Placement\n\nIcon tooltips and interactive tooltips may be positioned **top**, **bottom**, **left**, or **right** to the trigger item. The container of the tooltip text may be aligned to **start**, **center** or **end**.\n\nNote that left and right positioning is not available for [definition tooltip](#definition-tooltip). This ensures the tooltip does not obstruct important information to the left or right of the trigger word.\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n
\n\n## Variants\n\nTooltips provide additional, contextual information. Each variant achieves this for different design needs.\n\n### Icon tooltip\n\nAn icon tooltip is used to clarify the action or name of an interactive icon button.\n\n\n\n\n\n\n\n
\n\n#### Guidance:\n\n- The tooltip content should only contain one or two words.\n\n#### Behavior:\n\n- Icon tooltips appear on `hover` and `focus`.\n\n### Definition tooltip\n\nThe definition tooltip provides additional help or defines an item or term. It may be used on the label of a UI element, or on a word embedded in a paragraph.\n\n\n\n\n\n\n\n
\n\n#### Guidance:\n\n- Should contain brief, read-only text\n- Use on proper nouns, technical terms, or acronyms with two letters or more\n- Do not use a definition tooltip on words with fewer than two letters\n\n#### Behavior:\n\n- Definition tooltips appear on `hover` and `focus`\n\n### Interactive tooltips\n\nInteractive tooltips may contain rich text and other interactive elements like buttons or links. In general, hiding interactive content in a tooltip is discouraged. Interactive tooltips are best used for onboarding experiences and product tours.\n\n\n\n\n\n\n\n
\n\n#### Guidance:\n\n- If a user may need to visit an external resource, like while using a form, include a link in your interactive tooltip\n- Don't use without a label. Consider the context a user needs before clicking a link\n\n#### Behavior:\n\n- Interactive tooltips appear when the user clicks on an info icon\n- They persistent until intentionally dismissed by clicking outside of the tooltip\n","type":"Mdx","contentDigest":"4fa7a6a50285be013f117a1516f5462a","counter":1250,"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"]},"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']\n---\n\n## General guidance\n\nTooltips provide additional information upon hover or focus. The information should be contextual, useful, and nonessential information. Keep tooltips short.\n\n## Placement\n\nIcon tooltips and interactive tooltips may be positioned **top**, **bottom**, **left**, or **right** to the trigger item. The container of the tooltip text may be aligned to **start**, **center** or **end**.\n\nNote that left and right positioning is not available for [definition tooltip](#definition-tooltip). This ensures the tooltip does not obstruct important information to the left or right of the trigger word.\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n
\n\n## Variants\n\nTooltips provide additional, contextual information. Each variant achieves this for different design needs.\n\n### Icon tooltip\n\nAn icon tooltip is used to clarify the action or name of an interactive icon button.\n\n\n\n\n\n\n\n
\n\n#### Guidance:\n\n- The tooltip content should only contain one or two words.\n\n#### Behavior:\n\n- Icon tooltips appear on `hover` and `focus`.\n\n### Definition tooltip\n\nThe definition tooltip provides additional help or defines an item or term. It may be used on the label of a UI element, or on a word embedded in a paragraph.\n\n\n\n\n\n\n\n
\n\n#### Guidance:\n\n- Should contain brief, read-only text\n- Use on proper nouns, technical terms, or acronyms with two letters or more\n- Do not use a definition tooltip on words with fewer than two letters\n\n#### Behavior:\n\n- Definition tooltips appear on `hover` and `focus`\n\n### Interactive tooltips\n\nInteractive tooltips may contain rich text and other interactive elements like buttons or links. In general, hiding interactive content in a tooltip is discouraged. Interactive tooltips are best used for onboarding experiences and product tours.\n\n\n\n\n\n\n\n
\n\n#### Guidance:\n\n- If a user may need to visit an external resource, like while using a form, include a link in your interactive tooltip\n- Don't use without a label. Consider the context a user needs before clicking a link\n\n#### Behavior:\n\n- Interactive tooltips appear when the user clicks on an info icon\n- They persistent until intentionally dismissed by clicking outside of the tooltip\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/tooltip/usage.mdx"}}}}