var Component=(()=>{var p=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),f=(t,e)=>{for(var i in e)c(t,i,{get:e[i],enumerable:!0})},d=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of m(e))!y.call(t,l)&&l!==i&&c(t,l,{get:()=>e[l],enumerable:!(o=u(e,l))||o.enumerable});return t};var D=(t,e,i)=>(i=t!=null?p(b(t)):{},d(e||!t||!t.__esModule?c(i,"default",{value:t,enumerable:!0}):i,t)),C=t=>d(c({},"__esModule",{value:!0}),t);var s=g((E,a)=>{a.exports=_jsx_runtime});var N={};f(N,{default:()=>w,frontmatter:()=>T});var n=D(s()),T={title:"Tooltip",description:"A popup that shows info about an element when it gets keyboard focus or the mouse hovers over it.",libraryImport:'import { Tooltip } from "@xbeshui/core"',sourceGitLink:"View source code",sourceEditGitLink:"Edit this page",npmPackage:"@xbeshui/core",npmLink:"https://www.npmjs.com/package/xbeshui",gitLink:"https://github.com/madhavdutta/xbeshUI",docGitLink:"https://github.com/madhavdutta/xbesh-ui-kit-docs"};function h(t){let e=Object.assign({h3:"h3",a:"a",span:"span",div:"div",pre:"pre",code:"code",h2:"h2",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},t.components),{Tabs:i,Tooltip:o,Button:l}=e;return l||r("Button",!0),i||r("Tabs",!0),i.TabsContent||r("Tabs.TabsContent",!0),i.TabsList||r("Tabs.TabsList",!0),i.TabsTrigger||r("Tabs.TabsTrigger",!0),o||r("Tooltip",!0),o.Content||r("Tooltip.Content",!0),o.Trigger||r("Tooltip.Trigger",!0),(0,n.jsxs)(i,{defaultValue:"compTab",className:"w-full mt-6",children:[(0,n.jsxs)(i.TabsList,{variant:"underline",className:"border-b w-full justify-start",children:[(0,n.jsx)(i.TabsTrigger,{value:"compTab",children:"Component"}),(0,n.jsx)(i.TabsTrigger,{value:"props",children:"Props"})]}),(0,n.jsxs)(i.TabsContent,{value:"compTab",children:[(0,n.jsxs)(e.h3,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),(0,n.jsxs)(i,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,n.jsxs)(i.TabsList,{className:"border-b w-full bg-zinc-100 dark:bg-black justify-start",children:[(0,n.jsx)(i.TabsTrigger,{value:"preview1",children:"Preview"}),(0,n.jsx)(i.TabsTrigger,{value:"code1",children:"Code"})]}),(0,n.jsx)(i.TabsContent,{value:"code1",className:"p-5",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { Tooltip, Button } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'@xbeshui/core'"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"TooltipDemo"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ( "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Tooltip"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Tooltip.Trigger"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"asChild"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Tooltip"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Tooltip.Content"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Add to library"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,n.jsx)(i.TabsContent,{value:"preview1",children:(0,n.jsx)("div",{className:"flex justify-center p-10",children:(0,n.jsxs)(o,{children:[(0,n.jsx)(o.Trigger,{asChild:!0,children:(0,n.jsx)(l,{variant:"outline",children:"Tooltip"})}),(0,n.jsx)(o.Content,{children:(0,n.jsx)("p",{children:"Add to library"})})]})})})]})]}),(0,n.jsxs)(i.TabsContent,{value:"props",children:[(0,n.jsxs)(e.h2,{id:"tooltip-component-props",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#tooltip-component-props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Tooltip component props"]}),(0,n.jsxs)(e.h3,{id:"provider---wraps-your-app-to-provide-global-functionality-to-your-tooltips",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#provider---wraps-your-app-to-provide-global-functionality-to-your-tooltips",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Provider - Wraps your app to provide global functionality to your tooltips"]}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"delayDuration"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the duration of a delay, typically used in animations or transitions within the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"skipDelayDuration"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the duration of a skip delay, used to bypass certain delays within the component's behavior."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"disableHoverableContent"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Specifies whether hoverable content within the component should be disabled, preventing interactions triggered by hovering over the content."})]})]})]}),(0,n.jsxs)(e.h3,{id:"root---contains-all-the-parts-of-a-tooltip",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#root---contains-all-the-parts-of-a-tooltip",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Root - Contains all the parts of a tooltip"]}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"defaultOpen"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Determines whether the component is initially open or closed by default."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"open"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Controls whether the component is currently open or closed."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onOpenChange"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the open state of the component changes."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"delayDuration"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the duration of a delay, typically used in animations or transitions within the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"disableHoverableContent"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Specifies whether hoverable content within the component should be disabled, preventing interactions triggered by hovering over the content."})]})]})]}),(0,n.jsxs)(e.h3,{id:"trigger---the-button-that-toggles-the-tooltip-by-default-the-tooltipcontent-will-position-itself-against-the-trigger",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#trigger---the-button-that-toggles-the-tooltip-by-default-the-tooltipcontent-will-position-itself-against-the-trigger",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Trigger - The button that toggles the tooltip. By default, the Tooltip.Content will position itself against the trigger."]}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"asChild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,n.jsxs)(e.h3,{id:"portal---when-used-portals-the-content-part-into-the-body",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#portal---when-used-portals-the-content-part-into-the-body",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Portal - When used, portals the content part into the body."]}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"forceMount"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"container"}),(0,n.jsx)(e.td,{children:"HTMLElement"}),(0,n.jsx)(e.td,{children:"Specifies the container element in which the component should be rendered."})]})]})]}),(0,n.jsxs)(e.h3,{id:"content---the-component-that-pops-out-when-the-tooltip-is-open",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#content---the-component-that-pops-out-when-the-tooltip-is-open",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Content - The component that pops out when the tooltip is open."]}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"asChild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aria-label"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Provides an accessible label for the component, used by screen readers to describe the component's purpose or function."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onEscapeKeyDown"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the escape key is pressed while the component is focused."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onPointerDownOutside"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when a pointer event occurs outside of the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"forceMount"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"side"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Specifies the side of the target or parent element where the component should be positioned."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"sideOffset"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the offset for positioning the component from the side of its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"align"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Specifies the alignment of the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"alignOffset"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the offset for aligning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"avoidCollisions"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Enables collision detection and avoidance when positioning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"collisionBoundary"}),(0,n.jsx)(e.td,{children:"boundary"}),(0,n.jsx)(e.td,{children:"Specifies the boundary within which collisions are detected and avoided when positioning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"collisionPadding"}),(0,n.jsx)(e.td,{children:"number | Padding"}),(0,n.jsx)(e.td,{children:"Sets padding for collision detection during component positioning."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"arrowPadding"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Sets the padding around the arrow element of the component, adjusting its position relative to the target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"sticky"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Enables sticky behavior, allowing the component to remain fixed in its position when scrolling."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"hideWhenDetached"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Hides the component when it's detached from the DOM, improving performance and managing visibility."})]})]})]})]})]})}function v(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var w=v;function r(t,e){throw new Error("Expected "+(e?"component":"object")+" `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(N);})(); ;return Component;