var Component=(()=>{var u=Object.create;var t=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var _=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),x=(n,l)=>{for(var o in l)t(n,o,{get:l[o],enumerable:!0})},d=(n,l,o,F)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of T(l))!g.call(n,s)&&s!==o&&t(n,s,{get:()=>l[s],enumerable:!(F=f(l,s))||F.enumerable});return n};var C=(n,l,o)=>(o=n!=null?u(N(n)):{},d(l||!n||!n.__esModule?t(o,"default",{value:n,enumerable:!0}):o,n)),P=n=>d(t({},"__esModule",{value:!0}),n);var y=_((W,h)=>{h.exports=_jsx_runtime});var w={};x(w,{default:()=>b,frontmatter:()=>v});var e=C(y()),v={title:"Tooltip",description:"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",component:!0,links:{doc:"https://ui.shadcn.com/docs/components/tooltip",api:"https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference"}};function m(n){let l=Object.assign({h2:"h2",a:"a",span:"span",div:"div",pre:"pre",code:"code",p:"p"},n.components),{Tabs:o,TabsList:F,TabsTrigger:s,TabsContent:i,Steps:a,Step:c,ComponentSource:p}=l;return p||r("ComponentSource",!0),c||r("Step",!0),a||r("Steps",!0),o||r("Tabs",!0),i||r("TabsContent",!0),F||r("TabsList",!0),s||r("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(o,{defaultValue:"cli",children:[(0,e.jsxs)(F,{children:[(0,e.jsx)(s,{value:"cli",children:"CLI"}),(0,e.jsx)(s,{value:"manual",children:"Manual"})]}),(0,e.jsx)(i,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @udecode/plate-ui@latest add tooltip `,__npmCommand__:`npx @udecode/plate-ui@latest add tooltip `,__yarnCommand__:`npx @udecode/plate-ui@latest add tooltip `,__pnpmCommand__:`pnpm dlx @udecode/plate-ui@latest add tooltip `,__bunCommand__:`bunx --bun @udecode/plate-ui@latest add tooltip `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"npx "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"@udecode/plate-ui@latest"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"tooltip"})]})})})})}),(0,e.jsx)(i,{value:"manual",children:(0,e.jsxs)(a,{children:[(0,e.jsxs)(c,{children:[(0,e.jsx)(l.p,{children:"Install the following dependencies:"}),(0,e.jsxs)(l.p,{children:["Install the ",(0,e.jsx)(l.code,{children:"@radix-ui/react-tooltip"})," component from radix-ui:"]}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-tooltip `,__npmCommand__:`npm install @radix-ui/react-tooltip `,__yarnCommand__:`yarn add @radix-ui/react-tooltip `,__pnpmCommand__:`pnpm add @radix-ui/react-tooltip `,__bunCommand__:`bun add @radix-ui/react-tooltip `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"@radix-ui/react-tooltip"})]})})})})]}),(0,e.jsx)(c,{children:(0,e.jsx)(l.p,{children:"Copy and paste the following code into your project."})}),(0,e.jsx)(p,{name:"tooltip",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`'use client'; import React from 'react'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; import { withCn, withProps } from '@udecode/cn'; export const TooltipProvider = TooltipPrimitive.Provider; export const Tooltip = TooltipPrimitive.Root; export const TooltipTrigger = TooltipPrimitive.Trigger; export const TooltipPortal = TooltipPrimitive.Portal; export const TooltipContent = withCn( withProps(TooltipPrimitive.Content, { sideOffset: 4, }), 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md' ); export function withTooltip< T extends React.ComponentType | keyof HTMLElementTagNameMap, >(Component: T) { return React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { tooltip?: React.ReactNode; tooltipContentProps?: Omit< React.ComponentPropsWithoutRef, 'children' >; tooltipProps?: Omit< React.ComponentPropsWithoutRef, 'children' >; } >(function ExtendComponent( { tooltip, tooltipContentProps, tooltipProps, ...props }, ref ) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { setMounted(true); }, []); const component = ; if (tooltip && mounted) { return ( {component} {tooltip} ); } return component; }); } `,__src__:"registry/default/plate-ui/tooltip.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'use client'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'react'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@radix-ui/react-tooltip'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" withCn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" withProps "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'@udecode/cn'"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipProvider "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Provider"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Tooltip "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Root"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipTrigger "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Trigger"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipPortal "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Portal"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TooltipContent "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" withCn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" withProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Content"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" sideOffset"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"4,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"withTooltip"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"T"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"extends"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ComponentType"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"|"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"keyof"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLElementTagNameMap"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"T"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"T"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"T"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tooltip"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tooltipContentProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Omit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'children'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">;"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tooltipProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Omit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"'children'"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">;"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(function"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ExtendComponent"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tooltip"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tooltipContentProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tooltipProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"mounted"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setMounted"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setMounted"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true);"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"[]);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" component "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Component ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{...("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" any"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>;"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"tooltip "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" mounted"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Tooltip "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"tooltipProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipTrigger asChild"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"component"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipPortal"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TooltipContent "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"tooltipContentProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"tooltip"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" component"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"});"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),(0,e.jsx)(c,{children:(0,e.jsx)(l.p,{children:"Update the import paths to match your project setup."})})]})})]})]})}function R(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(m,n)})):m(n)}var b=R;function r(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return P(w);})(); ;return Component;