[{"data":1,"prerenderedAt":985},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Ftooltip":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Ftooltip":980},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":86,"badge":13,"body":189,"description":975,"extension":976,"meta":977,"navigation":458,"path":87,"seo":978,"status":13,"stem":88,"__hash__":979},"docs\u002Fdocs\u002F2.components\u002F13.tooltip.md",{"type":190,"value":191,"toc":960},"minimark",[192,201,221,234,238,243,268,310,332,336,350,378,382,393,582,598,602,608,653,666,674,678,698,702,714,720,746,750,761,765,866,870,880,884,901,905,934,939,943,956],[193,194,197],"playground",{"caption":195,"name":196},"Hover or focus the button.","tooltip",[198,199],"demo-tooltip",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The tooltips on this page are the real ",[209,218,219],{},"GoopTooltip",", and the code below is exactly what you write.",[206,222,223,225,226,233],{},[209,224,219],{}," wraps the same ",[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Ftooltip",[231],"nofollow","reka-ui Tooltip"," primitive as shadcn-vue's Tooltip, with the same API. Delays, hover and focus handling, and positioning work the same. Swap the imports and you're done.",[235,236,15],"h2",{"id":237},"installation",[239,240,242],"h3",{"id":241},"nuxt","Nuxt",[244,245,250],"pre",{"className":246,"code":247,"language":248,"meta":249,"style":249},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,251,252],{"__ignoreMap":249},[253,254,257,261,265],"span",{"class":255,"line":256},"line",1,[253,258,260],{"class":259},"sScJk","pnpm",[253,262,264],{"class":263},"sZZnC"," add",[253,266,267],{"class":263}," @goopui\u002Fnuxt\n",[244,269,274],{"className":270,"code":271,"filename":272,"language":273,"meta":249,"style":249},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,275,276,292,304],{"__ignoreMap":249},[253,277,278,282,285,288],{"class":255,"line":256},[253,279,281],{"class":280},"szBVR","export",[253,283,284],{"class":280}," default",[253,286,287],{"class":259}," defineNuxtConfig",[253,289,291],{"class":290},"sVt8B","({\n",[253,293,295,298,301],{"class":255,"line":294},2,[253,296,297],{"class":290},"  modules: [",[253,299,300],{"class":263},"'@goopui\u002Fnuxt'",[253,302,303],{"class":290},"],\n",[253,305,307],{"class":255,"line":306},3,[253,308,309],{"class":290},"})\n",[206,311,312,313,316,317,320,321,324,325,324,328,331],{},"The module auto-imports every ",[209,314,315],{},"GoopTooltip*"," part, adds ",[209,318,319],{},"goop.css",", and points Tailwind at the component classes. It needs Tailwind CSS v4 and the shadcn tokens (",[209,322,323],{},"--foreground",", ",[209,326,327],{},"--background",[209,329,330],{},"--radius",").",[239,333,335],{"id":334},"vue","Vue",[244,337,339],{"className":246,"code":338,"language":248,"meta":249,"style":249},"pnpm add @goopui\u002Fvue\n",[209,340,341],{"__ignoreMap":249},[253,342,343,345,347],{"class":255,"line":256},[253,344,260],{"class":259},[253,346,264],{"class":263},[253,348,349],{"class":263}," @goopui\u002Fvue\n",[244,351,356],{"className":352,"code":353,"filename":354,"language":355,"meta":249,"style":249},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,357,358,369],{"__ignoreMap":249},[253,359,360,363,366],{"class":255,"line":256},[253,361,362],{"class":280},"@import",[253,364,365],{"class":263}," \"tailwindcss\"",[253,367,368],{"class":290},";\n",[253,370,371,373,376],{"class":255,"line":294},[253,372,362],{"class":280},[253,374,375],{"class":263}," \"@goopui\u002Fvue\u002Fgoop.css\"",[253,377,368],{"class":290},[235,379,381],{"id":380},"usage","Usage",[206,383,384,385,388,389,392],{},"Wrap your app (or the part that has tooltips) in a ",[209,386,387],{},"GoopTooltipProvider"," once. It sets ",[209,390,391],{},"delayDuration"," to 0, like shadcn.",[244,394,397],{"className":395,"code":396,"language":334,"meta":249,"style":249},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\nimport { GoopButton, GoopTooltip, GoopTooltipContent, GoopTooltipProvider, GoopTooltipTrigger } from '@goopui\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopTooltipProvider>\n    \u003CGoopTooltip>\n      \u003CGoopTooltipTrigger as-child>\n        \u003CGoopButton variant=\"outline\">Hover me\u003C\u002FGoopButton>\n      \u003C\u002FGoopTooltipTrigger>\n      \u003CGoopTooltipContent>Add to library\u003C\u002FGoopTooltipContent>\n    \u003C\u002FGoopTooltip>\n  \u003C\u002FGoopTooltipProvider>\n\u003C\u002Ftemplate>\n",[209,398,399,423,429,443,453,460,470,480,490,504,528,538,553,563,573],{"__ignoreMap":249},[253,400,401,404,408,411,414,417,420],{"class":255,"line":256},[253,402,403],{"class":290},"\u003C",[253,405,407],{"class":406},"s9eBZ","script",[253,409,410],{"class":259}," setup",[253,412,413],{"class":259}," lang",[253,415,416],{"class":290},"=",[253,418,419],{"class":263},"\"ts\"",[253,421,422],{"class":290},">\n",[253,424,425],{"class":255,"line":294},[253,426,428],{"class":427},"sJ8bj","\u002F\u002F Nuxt auto-imports these. In plain Vue, import them:\n",[253,430,431,434,437,440],{"class":255,"line":306},[253,432,433],{"class":280},"import",[253,435,436],{"class":290}," { GoopButton, GoopTooltip, GoopTooltipContent, GoopTooltipProvider, GoopTooltipTrigger } ",[253,438,439],{"class":280},"from",[253,441,442],{"class":263}," '@goopui\u002Fvue'\n",[253,444,446,449,451],{"class":255,"line":445},4,[253,447,448],{"class":290},"\u003C\u002F",[253,450,407],{"class":406},[253,452,422],{"class":290},[253,454,456],{"class":255,"line":455},5,[253,457,459],{"emptyLinePlaceholder":458},true,"\n",[253,461,463,465,468],{"class":255,"line":462},6,[253,464,403],{"class":290},[253,466,467],{"class":406},"template",[253,469,422],{"class":290},[253,471,473,476,478],{"class":255,"line":472},7,[253,474,475],{"class":290},"  \u003C",[253,477,387],{"class":406},[253,479,422],{"class":290},[253,481,483,486,488],{"class":255,"line":482},8,[253,484,485],{"class":290},"    \u003C",[253,487,219],{"class":406},[253,489,422],{"class":290},[253,491,493,496,499,502],{"class":255,"line":492},9,[253,494,495],{"class":290},"      \u003C",[253,497,498],{"class":406},"GoopTooltipTrigger",[253,500,501],{"class":259}," as-child",[253,503,422],{"class":290},[253,505,507,510,513,516,518,521,524,526],{"class":255,"line":506},10,[253,508,509],{"class":290},"        \u003C",[253,511,512],{"class":406},"GoopButton",[253,514,515],{"class":259}," variant",[253,517,416],{"class":290},[253,519,520],{"class":263},"\"outline\"",[253,522,523],{"class":290},">Hover me\u003C\u002F",[253,525,512],{"class":406},[253,527,422],{"class":290},[253,529,531,534,536],{"class":255,"line":530},11,[253,532,533],{"class":290},"      \u003C\u002F",[253,535,498],{"class":406},[253,537,422],{"class":290},[253,539,541,543,546,549,551],{"class":255,"line":540},12,[253,542,495],{"class":290},[253,544,545],{"class":406},"GoopTooltipContent",[253,547,548],{"class":290},">Add to library\u003C\u002F",[253,550,545],{"class":406},[253,552,422],{"class":290},[253,554,556,559,561],{"class":255,"line":555},13,[253,557,558],{"class":290},"    \u003C\u002F",[253,560,219],{"class":406},[253,562,422],{"class":290},[253,564,566,569,571],{"class":255,"line":565},14,[253,567,568],{"class":290},"  \u003C\u002F",[253,570,387],{"class":406},[253,572,422],{"class":290},[253,574,576,578,580],{"class":255,"line":575},15,[253,577,448],{"class":290},[253,579,467],{"class":406},[253,581,422],{"class":290},[206,583,584,585,324,587,324,589,591,592,594,595,597],{},"The parts are ",[209,586,387],{},[209,588,219],{},[209,590,498],{},", and ",[209,593,545],{},". All the goo lives on ",[209,596,545],{},".",[235,599,601],{"id":600},"behavior","Behavior",[206,603,604,605,607],{},"It's the ",[227,606,78],{"href":79},"'s emerge engine, scaled down for a small label:",[609,610,611,619,629,643],"ul",{},[612,613,614,618],"li",{},[615,616,617],"strong",{},"Open (bloom)."," The label pools from its own center, spreads out with a lobed edge, overshoots, and settles. It's quick: about a third of a second at the default preset.",[612,620,621,624,625,628],{},[615,622,623],{},"Light slosh."," The edges bulge a little and settle (",[209,626,627],{},"openSlosh",", 0.4 strength by default).",[612,630,631,634,635,638,639,642],{},[615,632,633],{},"Light splash."," A few small drops fly off and keep clear of the trigger. It's much lighter than the Popover's (",[209,636,637],{},"openDrips",", and the ",[209,640,641],{},"openDrip*"," knobs to turn it up).",[612,644,645,648,649,652],{},[615,646,647],{},"Close."," The label pulls in with a light wobble (",[209,650,651],{},"closeSlosh",", 0.5) and shrinks back to its center.",[206,654,655,658,659,662,663,665],{},[209,656,657],{},"flowStyle=\"neck\""," runs it out of the trigger through a neck instead. ",[209,660,661],{},":flow=\"false\""," gives the older open: a small bulb swells out of the trigger edge, the label inflates out of it, and the neck snaps. That open has no drips unless you turn ",[209,664,637],{}," on.",[609,667,668],{},[612,669,670,673],{},[615,671,672],{},"Text stays sharp."," Only the background is goo, drawn behind the label.",[235,675,677],{"id":676},"inverted-tokens","Inverted tokens",[206,679,680,681,683,684,686,687,690,691,694,695,597],{},"Like shadcn's tooltip, it's inverted: a ",[209,682,323],{}," background with ",[209,685,327],{}," text. That is the default here too, and the arrow matches. A tooltip is a label, not an extension of its trigger, so unlike the Popover the default ",[209,688,689],{},"surface"," is ",[209,692,693],{},"'popover'"," (shadcn's inverted look), not ",[209,696,697],{},"'trigger'",[235,699,701],{"id":700},"sides","Sides",[206,703,704,324,707,591,710,713],{},[209,705,706],{},"side",[209,708,709],{},"align",[209,711,712],{},"sideOffset"," are reka-ui's:",[715,716,718],"preview",{":controls":717},"false",[198,719],{"set":700},[244,721,723],{"className":395,"code":722,"language":334,"meta":249,"style":249},"\u003CGoopTooltipContent side=\"right\">Tooltip on the right\u003C\u002FGoopTooltipContent>\n",[209,724,725],{"__ignoreMap":249},[253,726,727,729,731,734,736,739,742,744],{"class":255,"line":256},[253,728,403],{"class":290},[253,730,545],{"class":406},[253,732,733],{"class":259}," side",[253,735,416],{"class":290},[253,737,738],{"class":263},"\"right\"",[253,740,741],{"class":290},">Tooltip on the right\u003C\u002F",[253,743,545],{"class":406},[253,745,422],{"class":290},[235,747,749],{"id":748},"surface-color-and-drips","Surface color and drips",[206,751,752,753,756,757,760],{},"Set ",[209,754,755],{},"surface=\"trigger\""," to use the trigger's background and text color, or pass any CSS color. The text and the arrow follow. ",[209,758,759],{},":open-drips"," sets the splash:",[715,762,763],{":controls":717},[198,764],{"set":689},[244,766,768],{"className":395,"code":767,"language":334,"meta":249,"style":249},"\u003CGoopTooltipContent surface=\"trigger\">Takes the trigger's color\u003C\u002FGoopTooltipContent>\n\u003CGoopTooltipContent surface=\"oklch(0.62 0.19 150)\">Any CSS color\u003C\u002FGoopTooltipContent>\n\u003CGoopTooltipContent :open-drips=\"false\">No splash\u003C\u002FGoopTooltipContent>\n\u003CGoopTooltipContent :open-drips=\"1.5\">A bigger splash\u003C\u002FGoopTooltipContent>\n",[209,769,770,791,811,840],{"__ignoreMap":249},[253,771,772,774,776,779,781,784,787,789],{"class":255,"line":256},[253,773,403],{"class":290},[253,775,545],{"class":406},[253,777,778],{"class":259}," surface",[253,780,416],{"class":290},[253,782,783],{"class":263},"\"trigger\"",[253,785,786],{"class":290},">Takes the trigger's color\u003C\u002F",[253,788,545],{"class":406},[253,790,422],{"class":290},[253,792,793,795,797,799,801,804,807,809],{"class":255,"line":294},[253,794,403],{"class":290},[253,796,545],{"class":406},[253,798,778],{"class":259},[253,800,416],{"class":290},[253,802,803],{"class":263},"\"oklch(0.62 0.19 150)\"",[253,805,806],{"class":290},">Any CSS color\u003C\u002F",[253,808,545],{"class":406},[253,810,422],{"class":290},[253,812,813,815,817,820,823,825,828,831,833,836,838],{"class":255,"line":306},[253,814,403],{"class":290},[253,816,545],{"class":406},[253,818,819],{"class":290}," :",[253,821,822],{"class":259},"open-drips",[253,824,416],{"class":290},[253,826,827],{"class":263},"\"",[253,829,717],{"class":830},"sj4cs",[253,832,827],{"class":263},[253,834,835],{"class":290},">No splash\u003C\u002F",[253,837,545],{"class":406},[253,839,422],{"class":290},[253,841,842,844,846,848,850,852,854,857,859,862,864],{"class":255,"line":445},[253,843,403],{"class":290},[253,845,545],{"class":406},[253,847,819],{"class":290},[253,849,822],{"class":259},[253,851,416],{"class":290},[253,853,827],{"class":263},[253,855,856],{"class":830},"1.5",[253,858,827],{"class":263},[253,860,861],{"class":290},">A bigger splash\u003C\u002F",[253,863,545],{"class":406},[253,865,422],{"class":290},[235,867,869],{"id":868},"plain-shadcn","Plain shadcn",[206,871,872,875,876,879],{},[209,873,874],{},":goo=\"false\""," renders exactly shadcn's ",[209,877,878],{},"TooltipContent",", with its own enter and exit animation.",[235,881,883],{"id":882},"driving-it-from-code","Driving it from code",[206,885,886,888,889,892,893,896,897,900],{},[209,887,545],{}," exposes its engine handle as ",[209,890,891],{},"handle"," (",[209,894,895],{},"null"," before it mounts, or when ",[209,898,899],{},"goo"," is off).",[235,902,904],{"id":903},"props","Props",[206,906,907,324,909,591,911,913,914,916,917,919,920,324,922,324,924,926,927,930,931,933],{},[209,908,387],{},[209,910,219],{},[209,912,498],{}," take shadcn-vue's props. ",[209,915,545],{}," takes reka-ui's ",[209,918,878],{}," props (",[209,921,706],{},[209,923,709],{},[209,925,712],{},", ...), ",[209,928,929],{},"class",", and these goo props. ",[209,932,712],{}," defaults to 0, like shadcn.",[935,936],"component-props",{"name":196,"part":937},[938],"content",[235,940,942],{"id":941},"accessibility","Accessibility",[206,944,945,946,949,950,953,954,597],{},"Hover and keyboard focus open it, Escape closes it, and the content has ",[209,947,948],{},"role=\"tooltip\""," and is linked to the trigger, all from reka-ui. The goo surface is ",[209,951,952],{},"aria-hidden",". Under reduced motion the tooltip opens and closes plainly: it keeps its goo shape and color, with no bloom, bridge, slosh, drops, or wobble. See ",[227,955,23],{"href":24},[957,958,959],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":249,"searchDepth":306,"depth":306,"links":961},[962,966,967,968,969,970,971,972,973,974],{"id":237,"depth":294,"text":15,"children":963},[964,965],{"id":241,"depth":306,"text":242},{"id":334,"depth":306,"text":335},{"id":380,"depth":294,"text":381},{"id":600,"depth":294,"text":601},{"id":676,"depth":294,"text":677},{"id":700,"depth":294,"text":701},{"id":748,"depth":294,"text":749},{"id":868,"depth":294,"text":869},{"id":882,"depth":294,"text":883},{"id":903,"depth":294,"text":904},{"id":941,"depth":294,"text":942},"shadcn's Tooltip with goo. A small label that blooms open, quick and light.","md",{},{"title":86,"description":975},"KrRqZFxqJjEnKcuxDYmtkojqI53tzP9aXDMe1Gijg4g",[981,983],{"title":82,"path":83,"stem":84,"description":982,"children":-1},"shadcn's Dropdown Menu with goo. The menu blooms open, and the highlight is a blob that slides between items.",{"title":90,"path":91,"stem":92,"description":984,"children":-1},"shadcn's Tabs with goo. The active tab is a blob that slides between triggers and lands with a jelly overshoot.",1793670386817]