{"componentChunkName":"component---src-pages-components-tooltip-code-mdx","path":"/components/tooltip/code/","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/code.mdx","titleType":"prepend","MdxNode":{"id":"dbeb063f-ae6c-5674-ba33-f1a1ecd77ead","children":[],"parent":"e940835a-6501-58bd-8d8a-3fd6e5863bea","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\nimport { Filter16 } from '@carbon/icons-react';\n\n## Tooltip\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tooltip--default-bottom',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',\n  }}>\n  {`\n  <Tooltip\n    direction=\"bottom\"\n    tabIndex={0}\n    triggerText=\"Tooltip label\"\n  >\n    <p>\n      This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.\n    </p>\n    <div className=\"bx--tooltip__footer\">\n      <Link href=\"#\">Learn More</Link>\n      <Button size=\"small\">\n        Create\n      </Button>\n    </div>\n  </Tooltip>\n  `}\n</ComponentDemo>\n\n## Icon tooltip\n\n<ComponentDemo\n  scope={{ Filter16 }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tooltipicon--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-icon--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',\n  }}\n  knobs={{ TooltipIcon: ['direction', 'align'] }}>\n  {`\n  <TooltipIcon\n    tooltipText=\"Filter\"\n  >\n    <Filter16/>\n  </TooltipIcon>\n  `}\n</ComponentDemo>\n\n## Definition tooltip\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tooltipdefinition--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--minimal-definition-tootlip',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',\n  }}\n  knobs={{ TooltipDefinition: ['direction', 'align'] }}>\n  {`\n  <TooltipDefinition\n    tooltipText=\"Brief description of the dotted, underlined word above.\"\n  >\n    Definition Tooltip\n  </TooltipDefinition>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"b839ca2949ec091e84bbd533eb465937","counter":1567,"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\nimport { Filter16 } from '@carbon/icons-react';\n\n## Tooltip\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tooltip--default-bottom',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',\n  }}>\n  {`\n  <Tooltip\n    direction=\"bottom\"\n    tabIndex={0}\n    triggerText=\"Tooltip label\"\n  >\n    <p>\n      This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.\n    </p>\n    <div className=\"bx--tooltip__footer\">\n      <Link href=\"#\">Learn More</Link>\n      <Button size=\"small\">\n        Create\n      </Button>\n    </div>\n  </Tooltip>\n  `}\n</ComponentDemo>\n\n## Icon tooltip\n\n<ComponentDemo\n  scope={{ Filter16 }}\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tooltipicon--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-icon--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--default-interactive-tootlip',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',\n  }}\n  knobs={{ TooltipIcon: ['direction', 'align'] }}>\n  {`\n  <TooltipIcon\n    tooltipText=\"Filter\"\n  >\n    <Filter16/>\n  </TooltipIcon>\n  `}\n</ComponentDemo>\n\n## Definition tooltip\n\n<ComponentDemo\n  links={{\n    React:\n      'https://react.carbondesignsystem.com/?path=/story/tooltipdefinition--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tooltip-definition--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtooltip--minimal-definition-tootlip',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip',\n  }}\n  knobs={{ TooltipDefinition: ['direction', 'align'] }}>\n  {`\n  <TooltipDefinition\n    tooltipText=\"Brief description of the dotted, underlined word above.\"\n  >\n    Definition Tooltip\n  </TooltipDefinition>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/tooltip/code.mdx"}}}}