var Component=(()=>{var F=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var u=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var o in n)c(e,o,{get:n[o],enumerable:!0})},a=(e,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of y(n))!f.call(e,t)&&t!==o&&c(e,t,{get:()=>n[t],enumerable:!(r=h(n,t))||r.enumerable});return e};var m=(e,n,o)=>(o=e!=null?F(E(e)):{},a(n||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),T=e=>a(c({},"__esModule",{value:!0}),e);var d=u((b,s)=>{s.exports=_jsx_runtime});var D={};C(D,{default:()=>v,frontmatter:()=>g});var l=m(d()),g={title:"Tooltip",description:"A cool way to give your users a hint of what a component does...\u{1F609}",lastUpdated:"08 Apr, 2025",links:{source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Tooltip.tsx",api_reference:"https://www.radix-ui.com/primitives/docs/components/tooltip#api-reference"}};function p(e){let n=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h4:"h4",h2:"h2",h3:"h3"},e.components),{ComponentShowcase:o,ComponentInstall:r,ComponentSource:t}=n;return r||i("ComponentInstall",!0),r.Cli||i("ComponentInstall.Cli",!0),r.Manual||i("ComponentInstall.Manual",!0),o||i("ComponentShowcase",!0),t||i("ComponentSource",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(o,{name:"tooltip-style-default",children:(0,l.jsx)(n.figure,{__src__:"preview/components/tooltip-style-default.tsx",__rawString__:`"use client"; import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStyleDefault() { return ( Add to Library ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Tooltip } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" TooltipStyleDefault"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Provider"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Hover"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Content"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Add to Library"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsxs)(r,{children:[(0,l.jsx)(r.Cli,{npmCommand:"npx shadcn@latest add 'https://retroui.dev/r/tooltip.json'"}),(0,l.jsxs)(r.Manual,{children:[(0,l.jsx)(n.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,l.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-tooltip"})]})})})}),(0,l.jsx)("br",{}),(0,l.jsx)(n.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,l.jsx)(t,{name:"tooltip",children:(0,l.jsx)(n.figure,{__src__:"/vercel/path0/components/retroui/Tooltip.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipPrimitive "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-tooltip"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { cva, VariantProps } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"class-variance-authority"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" tooltipContentVariants "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"z-50 overflow-hidden border-2 border-border bg-background px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"bg-background text-foreground"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" primary"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"bg-primary text-foreground"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" solid"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"bg-black text-white"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipProvider "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipPrimitive.Provider;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Tooltip "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipPrimitive.Root;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipTrigger "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipPrimitive.Trigger;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipContent "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" &"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"sideOffset"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#BF9EEE"},children:" 4"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"variant"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TooltipPrimitive.Portal"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TooltipPrimitive.Content"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" sideOffset"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{sideOffset}"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" tooltipContentVariants"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" variant,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }),"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"TooltipContent.displayName "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipPrimitive.Content.displayName;"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipObject "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:"assign"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(Tooltip, {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Trigger"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipTrigger,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Content"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipContent,"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Provider"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" TooltipProvider,"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { TooltipObject "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"as"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Tooltip };"})]})]})})})})]})]}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h2,{id:"examples",children:"Examples"}),` `,(0,l.jsx)(n.h3,{id:"default",children:"Default"}),` `,(0,l.jsx)(o,{name:"tooltip-style-default",children:(0,l.jsx)(n.figure,{__src__:"preview/components/tooltip-style-default.tsx",__rawString__:`"use client"; import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStyleDefault() { return ( Add to Library ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Tooltip } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" TooltipStyleDefault"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Provider"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Hover"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Content"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Add to Library"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h3,{id:"primary",children:"Primary"}),` `,(0,l.jsx)(o,{name:"tooltip-style-primary",children:(0,l.jsx)(n.figure,{__src__:"preview/components/tooltip-style-primary.tsx",__rawString__:`"use client"; import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStylePrimary() { return ( Add to Library ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Tooltip } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" TooltipStylePrimary"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Provider"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Hover"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Content"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"primary"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Add to Library"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(n.h3,{id:"solid",children:"Solid"}),` `,(0,l.jsx)(o,{name:"tooltip-style-solid",children:(0,l.jsx)(n.figure,{__src__:"preview/components/tooltip-style-solid.tsx",__rawString__:`"use client"; import { Button, Tooltip } from "@/components/retroui"; export default function TooltipStyleSolid() { return ( Add to Library ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button, Tooltip } "}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#62E884"},children:" TooltipStyleSolid"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Provider"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Trigger"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"outline"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Hover"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Tooltip.Content"}),(0,l.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#E7EE98"},children:"solid"}),(0,l.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Add to Library"})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(n.span,{"data-line":"",children:[(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(n.span,{"data-line":"",children:(0,l.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function S(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(p,e)})):p(e)}var v=S;function i(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return T(D);})(); ;return Component;