{"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":"71040f71-0b66-5f7d-a155-02127cd4644e","children":[],"parent":"821a0aac-5235-5485-9b4d-8a245dd605c1","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  {`\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  {`\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  {`\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":"6bcd015f371092ded050e41496bf89eb","counter":1574,"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  {`\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  {`\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  {`\n  <TooltipDefinition\n    tooltipText=\"Brief description of the dotted, underlined word above.\"\n  >\n    Definition Tooltip\n  </TooltipDefinition>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/tooltip/code.mdx"}}}}