12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Button } from 'welcome-ui/Button'\nimport { Tooltip } from 'welcome-ui/Tooltip'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Tooltip","pathToFile":"/Tooltip/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"fixed","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#fixed","textDecoration":{"hover":"underline"},"children":"Fixed"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Maybe you don't want the tooltip to follow the cursor set by ","position":{"start":{"line":4,"column":1,"offset":12},"end":{"line":4,"column":62,"offset":73}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fixed","position":{"start":{"line":4,"column":62,"offset":73},"end":{"line":4,"column":69,"offset":80}}}],"position":{"start":{"line":4,"column":62,"offset":73},"end":{"line":4,"column":69,"offset":80}}},{"type":"text","value":" property","position":{"start":{"line":4,"column":69,"offset":80},"end":{"line":4,"column":78,"offset":89}}}],"position":{"start":{"line":4,"column":1,"offset":12},"end":{"line":4,"column":78,"offset":89}}},"children":["Maybe you don't want the tooltip to follow the cursor set by ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"fixed"}]," property"]}],"\n",["$","$L20","div-0",{"code":"import { Button } from 'welcome-ui/Button'\nimport { Tooltip } from 'welcome-ui/Tooltip'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tooltip","pathToFile":"/Tooltip/docs/examples/fixed.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"with-an-arrow","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-an-arrow","textDecoration":{"hover":"underline"},"children":"With an arrow"}]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can use the ","position":{"start":{"line":10,"column":1,"offset":176},"end":{"line":10,"column":17,"offset":192}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withArrow","position":{"start":{"line":10,"column":17,"offset":192},"end":{"line":10,"column":28,"offset":203}}}],"position":{"start":{"line":10,"column":17,"offset":192},"end":{"line":10,"column":28,"offset":203}}},{"type":"text","value":" property to display an arrow pointing towards your trigger","position":{"start":{"line":10,"column":28,"offset":203},"end":{"line":10,"column":87,"offset":262}}}],"position":{"start":{"line":10,"column":1,"offset":176},"end":{"line":10,"column":87,"offset":262}}},"children":["You can use the ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"withArrow"}]," property to display an arrow pointing towards your trigger"]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It will only display with the ","position":{"start":{"line":12,"column":1,"offset":264},"end":{"line":12,"column":31,"offset":294}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fixed","position":{"start":{"line":12,"column":31,"offset":294},"end":{"line":12,"column":38,"offset":301}}}],"position":{"start":{"line":12,"column":31,"offset":294},"end":{"line":12,"column":38,"offset":301}}},{"type":"text","value":" property set to ","position":{"start":{"line":12,"column":38,"offset":301},"end":{"line":12,"column":55,"offset":318}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true","position":{"start":{"line":12,"column":55,"offset":318},"end":{"line":12,"column":61,"offset":324}}}],"position":{"start":{"line":12,"column":55,"offset":318},"end":{"line":12,"column":61,"offset":324}}}],"position":{"start":{"line":12,"column":1,"offset":264},"end":{"line":12,"column":61,"offset":324}}},"children":["It will only display with the ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"fixed"}]," property set to ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"true"}]]}],"\n",["$","$L20","div-1",{"code":"import { Button } from 'welcome-ui/Button'\nimport { Tooltip } from 'welcome-ui/Tooltip'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tooltip","pathToFile":"/Tooltip/docs/examples/withArrow.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"with-a-long-text-and-a-custom-placement","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-a-long-text-and-a-custom-placement","textDecoration":{"hover":"underline"},"children":"With a long text and a custom placement"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Set a ","position":{"start":{"line":18,"column":1,"offset":441},"end":{"line":18,"column":7,"offset":447}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"max-width","position":{"start":{"line":18,"column":7,"offset":447},"end":{"line":18,"column":18,"offset":458}}}],"position":{"start":{"line":18,"column":7,"offset":447},"end":{"line":18,"column":18,"offset":458}}},{"type":"text","value":" for long text","position":{"start":{"line":18,"column":18,"offset":458},"end":{"line":18,"column":32,"offset":472}}}],"position":{"start":{"line":18,"column":1,"offset":441},"end":{"line":18,"column":32,"offset":472}}},"children":["Set a ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"max-width"}]," for long text"]}],"\n",["$","$L20","div-2",{"code":"import { Tooltip } from 'welcome-ui/Tooltip'\n\nconst Example = () => {\n return (\n lorem ipsum dolor sit amet, consectetur adipiscing elit}\n fixed\n placement=\"bottom-start\"\n >\n With long text\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tooltip","pathToFile":"/Tooltip/docs/examples/long-text.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"with-a-disabled-button","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-a-disabled-button","textDecoration":{"hover":"underline"},"children":"With a disabled button"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We're adding a wrapper around the button when it's disabled otherwise the tooltip does not trigger.","position":{"start":{"line":24,"column":1,"offset":572},"end":{"line":24,"column":100,"offset":671}}}],"position":{"start":{"line":24,"column":1,"offset":572},"end":{"line":24,"column":100,"offset":671}}},"children":"We're adding a wrapper around the button when it's disabled otherwise the tooltip does not trigger."}],"\n",["$","$L20","div-3",{"code":"import { Button } from 'welcome-ui/Button'\nimport { Tooltip } from 'welcome-ui/Tooltip'\n\nconst Example = () => {\n return (\n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Tooltip","pathToFile":"/Tooltip/docs/examples/disabled.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"placement","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#placement","textDecoration":{"hover":"underline"},"children":"Placement"}]}],"\n",["$","$L21","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using only with the ","position":{"start":{"line":30,"column":1,"offset":757},"end":{"line":30,"column":21,"offset":777}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fixed","position":{"start":{"line":30,"column":21,"offset":777},"end":{"line":30,"column":28,"offset":784}}}],"position":{"start":{"line":30,"column":21,"offset":777},"end":{"line":30,"column":28,"offset":784}}},{"type":"text","value":" prop, ","position":{"start":{"line":30,"column":28,"offset":784},"end":{"line":30,"column":35,"offset":791}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"placement","position":{"start":{"line":30,"column":35,"offset":791},"end":{"line":30,"column":46,"offset":802}}}],"position":{"start":{"line":30,"column":35,"offset":791},"end":{"line":30,"column":46,"offset":802}}},{"type":"text","value":" will enable a translate animation on your tooltip. The direction works with these values for ","position":{"start":{"line":30,"column":46,"offset":802},"end":{"line":30,"column":140,"offset":896}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"placement","position":{"start":{"line":30,"column":140,"offset":896},"end":{"line":30,"column":151,"offset":907}}}],"position":{"start":{"line":30,"column":140,"offset":896},"end":{"line":30,"column":151,"offset":907}}},{"type":"text","value":".","position":{"start":{"line":30,"column":151,"offset":907},"end":{"line":30,"column":152,"offset":908}}}],"position":{"start":{"line":30,"column":1,"offset":757},"end":{"line":30,"column":152,"offset":908}}},"children":["Using only with the ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"fixed"}]," prop, ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"placement"}]," will enable a translate animation on your tooltip. The direction works with these values for ",["$","$L5","code-2",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"placement"}],"."]}],"\n",["$","$L20","div-4",{"code":"$22","isOverview":false,"mt":"$undefined","name":"Tooltip","pathToFile":"/Tooltip/docs/examples/placement.tsx","withCodeEditor":true}]]}]]}],["$","$L23",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#fixed","id":"fixed","title":"Fixed"},{"href":"#with-an-arrow","id":"with-an-arrow","title":"With an arrow"},{"href":"#with-a-long-text-and-a-custom-placement","id":"with-a-long-text-and-a-custom-placement","title":"With a long text and a custom placement"},{"href":"#with-a-disabled-button","id":"with-a-disabled-button","title":"With a disabled button"},{"href":"#placement","id":"placement","title":"Placement"}]}]}]]