https://pikas-ui.vercel.app/_next/static/chunks/pages/components/tooltip-3922531b03c4b240.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2343],{8081:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/tooltip",function(){return n(7493)}])},7493:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return p},getLink:function(){return x},stylesLink:function(){return h}});var s=n(7458),l=n(2640),i=n(5085),c=n(3040),d=n(4196);let a=()=>(0,s.jsx)(i.S_,{children:(0,s.jsx)(d.u,{content:"Hello world",children:(0,s.jsx)(c.x,{size:40,name:"bx:baguette",colorName:"black"})})});var r=n(9869),o=n(6792);let{getLink:x}=r.docsUIRoutes,h=x("styles");function j(e){let t={a:"a",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,l.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.PB,{title:"Tooltip"}),"\n",(0,s.jsx)(t.h1,{children:"@pikas-ui/tooltip"}),"\n",(0,s.jsx)(t.p,{children:"This package contains a tooltip component that can be used to display a tooltip on hover or focus."}),"\n",(0,s.jsxs)(t.p,{children:["This library is based on ",(0,s.jsx)(t.a,{href:"https://www.radix-ui.com/",children:"Radix Ui"}),"."]}),"\n",(0,s.jsx)("a",{href:"https://github.com/Achaak/pikas/blob/main/packages/ui/tooltip/CHANGELOG.md",children:(0,s.jsx)(t.p,{children:"Change Log"})}),"\n",(0,s.jsx)(t.h2,{children:"Requirements"}),"\n",(0,s.jsxs)(t.p,{children:["To use this package, you must install the ",(0,s.jsx)("a",{href:h,children:"@pikas-ui/styles"})," package."]}),"\n",(0,s.jsx)(t.h2,{children:"Installation"}),"\n",(0,s.jsx)(t.p,{children:"You can install this package using npm, yarn, or pnpm."}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-unknown",children:(0,s.jsx)(t.code,{className:"language-unknown",children:"npm install @pikas-ui/tooltip"})})}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-unknown",children:(0,s.jsx)(t.code,{className:"language-unknown",children:"yarn add @pikas-ui/tooltip"})})}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-unknown",children:(0,s.jsx)(t.code,{className:"language-unknown",children:"pnpm add @pikas-ui/tooltip"})})}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{children:"Usage"}),"\n",(0,s.jsx)(t.h3,{children:"Tooltip"}),"\n",(0,s.jsx)(t.p,{children:"The tooltip component is used to display a tooltip on hover or focus."}),"\n",(0,s.jsx)(a,{}),"\n",(0,s.jsx)(t.div,{className:"remark-highlight",children:(0,s.jsx)(t.pre,{className:"language-tsx",children:(0,s.jsxs)(t.code,{className:"language-tsx",children:[(0,s.jsx)(t.span,{className:"token keyword",children:"import"})," ",(0,s.jsxs)(t.span,{className:"token imports",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"{"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"Tooltip"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"}"})]})," ",(0,s.jsx)(t.span,{className:"token keyword",children:"from"})," ",(0,s.jsx)(t.span,{className:"token string",children:"'@pikas-ui/tooltip'"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n",(0,s.jsx)(t.span,{className:"token keyword",children:"import"})," ",(0,s.jsxs)(t.span,{className:"token imports",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"{"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"IconByName"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"}"})]})," ",(0,s.jsx)(t.span,{className:"token keyword",children:"from"})," ",(0,s.jsx)(t.span,{className:"token string",children:"'@pikas-ui/icons'"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n\n",(0,s.jsx)(t.span,{className:"token keyword",children:"const"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"Example"}),(0,s.jsx)(t.span,{className:"token operator",children:":"})," ",(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"React"}),(0,s.jsx)(t.span,{className:"token punctuation",children:"."}),(0,s.jsx)(t.span,{className:"token method-variable function-variable method function property-access",children:(0,s.jsx)(t.span,{className:"token maybe-class-name",children:"FC"})})," ",(0,s.jsx)(t.span,{className:"token operator",children:"="})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"("}),(0,s.jsx)(t.span,{className:"token punctuation",children:")"})," ",(0,s.jsx)(t.span,{className:"token arrow operator",children:"=>"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"{"}),"\n  ",(0,s.jsx)(t.span,{className:"token keyword",children:"return"})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"("}),"\n    ",(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"<"}),(0,s.jsx)(t.span,{className:"token class-name",children:"Tooltip"})]})," ",(0,s.jsx)(t.span,{className:"token attr-name",children:"content"}),(0,s.jsxs)(t.span,{className:"token attr-value",children:[(0,s.jsx)(t.span,{className:"token punctuation attr-equals",children:"="}),(0,s.jsx)(t.span,{className:"token punctuation",children:'"'}),"Hello world",(0,s.jsx)(t.span,{className:"token punctuation",children:'"'})]}),(0,s.jsx)(t.span,{className:"token punctuation",children:">"})]}),(0,s.jsx)(t.span,{className:"token plain-text"}),"\n",(0,s.jsx)(t.span,{className:"token plain-text",children:"      "}),(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"<"}),(0,s.jsx)(t.span,{className:"token class-name",children:"IconByName"})]})," ",(0,s.jsx)(t.span,{className:"token attr-name",children:"size"}),(0,s.jsxs)(t.span,{className:"token script language-javascript",children:[(0,s.jsx)(t.span,{className:"token script-punctuation punctuation",children:"="}),(0,s.jsx)(t.span,{className:"token punctuation",children:"{"}),(0,s.jsx)(t.span,{className:"token number",children:"40"}),(0,s.jsx)(t.span,{className:"token punctuation",children:"}"})]})," ",(0,s.jsx)(t.span,{className:"token attr-name",children:"name"}),(0,s.jsxs)(t.span,{className:"token attr-value",children:[(0,s.jsx)(t.span,{className:"token punctuation attr-equals",children:"="}),(0,s.jsx)(t.span,{className:"token punctuation",children:'"'}),"bx:baguette",(0,s.jsx)(t.span,{className:"token punctuation",children:'"'})]})," ",(0,s.jsx)(t.span,{className:"token punctuation",children:"/>"})]}),(0,s.jsx)(t.span,{className:"token plain-text"}),"\n",(0,s.jsx)(t.span,{className:"token plain-text",children:"    "}),(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsxs)(t.span,{className:"token tag",children:[(0,s.jsx)(t.span,{className:"token punctuation",children:"</"}),(0,s.jsx)(t.span,{className:"token class-name",children:"Tooltip"})]}),(0,s.jsx)(t.span,{className:"token punctuation",children:">"})]}),"\n  ",(0,s.jsx)(t.span,{className:"token punctuation",children:")"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n",(0,s.jsx)(t.span,{className:"token punctuation",children:"}"}),(0,s.jsx)(t.span,{className:"token punctuation",children:";"}),"\n"]})})}),"\n",(0,s.jsx)(t.h4,{children:"Props"}),"\n",(0,s.jsxs)(t.table,{children:[(0,s.jsx)(t.thead,{children:(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Prop"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Description"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Type"}),(0,s.jsx)(t.th,{style:{textAlign:"left"},children:"Default"})]})}),(0,s.jsxs)(t.tbody,{children:[(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"content"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Tooltip content"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"string or ReactNode"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"children"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Trigger element"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"ReactNode"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"backgroundColorName"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"}

1,children:"Background color"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"PikasColors"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"white"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"open"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Open state"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"defaultOpen"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Default open"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"onOpenChange"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Event handler"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"(open: boolean) => void"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"delayDuration"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Delay duration"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"skipDelayDuration"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Skip delay duration"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"hasArrow"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Has arrow indicator"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"true"})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"arrowSize"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Arrow size"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"10"})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"arrowOffset"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Arrow offset"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"8"})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"side"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Side of the tooltip"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"TooltipSide"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"sideOffset"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Side offset of the tooltip"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"align"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Align of content"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"TooltipAlign"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"alignOffset"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Align offset"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"avoidCollisions"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Avoid collisions"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"boolean"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"true"})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"collisionPadding"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Collision tolerance of the tooltip"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"number"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"borderRadius"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Border radius of the tooltip"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"PikasRadius"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"md"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"fontSize"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Font size of content"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"PikasFontSize"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"em-small"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"fontWeight"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Font weight of content"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"PikasFontWeight"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"}

1,children:(0,s.jsx)(t.code,{children:"boxShadow"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Box shadow of the tooltip"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"PikasShadow"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"bottom-md"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"padding"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Padding of the tooltip"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"TooltipPadding"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:'"md"'})})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"css"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"Custom css"}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:(0,s.jsx)(t.code,{children:"TooltipCSS"})}),(0,s.jsx)(t.td,{style:{textAlign:"left"},children:"-"})]})]})]}),"\n",(0,s.jsx)(t.hr,{}),"\n",(0,s.jsx)(t.h2,{children:"Contributing"}),"\n",(0,s.jsxs)(t.p,{children:["This documentation can be edited on GitHub ",(0,s.jsx)(t.a,{href:"https://github.com/Achaak/pikas/blob/main/apps/docs-ui/pages/components/tooltip.mdx",children:"here"})]})]})}function p(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{wrapper:t}={...(0,l.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(j,{...e})}):j(e)}},2640:function(e,t,n){"use strict";n.d(t,{a:function(){return i}});var s=n(2983);let l=s.createContext({});function i(e){let t=s.useContext(l);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}}},function(e){e.O(0,[2888,9774,179],function(){return e(e.s=8081)}),_N_E=e.O()}]);