[{"data":1,"prerenderedAt":1401},["ShallowReactive",2],{"navigation_docs":3,"-guide-getting-started-first-tooltip":271,"-guide-getting-started-first-tooltip-surround":1396},[4,135],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,73,91,109],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":28},"Getting Started","i-lucide-rocket","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",[16,20,24],{"title":17,"path":18,"stem":19},"Introduction","\u002Fguide\u002Fgetting-started\u002Fintroduction","1.guide\u002F1.getting-started\u002F1.introduction",{"title":21,"path":22,"stem":23},"First Tooltip","\u002Fguide\u002Fgetting-started\u002Ffirst-tooltip","1.guide\u002F1.getting-started\u002F2.first-tooltip",{"title":25,"path":26,"stem":27},"First Popover","\u002Fguide\u002Fgetting-started\u002Ffirst-popover","1.guide\u002F1.getting-started\u002F3.first-popover",false,{"title":30,"icon":31,"path":32,"stem":33,"children":34,"page":28},"Core Concepts","i-lucide-boxes","\u002Fguide\u002Fcore-concepts","1.guide\u002F2.core-concepts",[35,39,43,47],{"title":36,"path":37,"stem":38},"Floating Node","\u002Fguide\u002Fcore-concepts\u002Ffloating-node","1.guide\u002F2.core-concepts\u002F1.floating-node",{"title":40,"path":41,"stem":42},"Placement & Positioning","\u002Fguide\u002Fcore-concepts\u002Fplacement-and-positioning","1.guide\u002F2.core-concepts\u002F2.placement-and-positioning",{"title":44,"path":45,"stem":46},"Interaction Model","\u002Fguide\u002Fcore-concepts\u002Finteraction-model","1.guide\u002F2.core-concepts\u002F3.interaction-model",{"title":48,"path":49,"stem":50},"Tree Coordination","\u002Fguide\u002Fcore-concepts\u002Ftree-coordination-explained","1.guide\u002F2.core-concepts\u002F4.tree-coordination-explained",{"title":52,"icon":53,"path":54,"stem":55,"children":56,"page":28},"Patterns","i-lucide-component","\u002Fguide\u002Fcomponents","1.guide\u002F3.components",[57,61,65,69],{"title":58,"path":59,"stem":60},"Tooltips","\u002Fguide\u002Fcomponents\u002Fbuild-accessible-tooltips","1.guide\u002F3.components\u002F1.build-accessible-tooltips",{"title":62,"path":63,"stem":64},"Popovers & Dropdowns","\u002Fguide\u002Fcomponents\u002Fbuild-popovers-and-dropdowns","1.guide\u002F3.components\u002F2.build-popovers-and-dropdowns",{"title":66,"path":67,"stem":68},"Dialogs & Modals","\u002Fguide\u002Fcomponents\u002Fbuild-dialogs-and-modals","1.guide\u002F3.components\u002F3.build-dialogs-and-modals",{"title":70,"path":71,"stem":72},"Nested Menus","\u002Fguide\u002Fcomponents\u002Fbuild-nested-menus","1.guide\u002F3.components\u002F4.build-nested-menus",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":28},"Positioning","i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F4.positioning",[79,83,87],{"title":80,"path":81,"stem":82},"Keep in View","\u002Fguide\u002Fpositioning\u002Fkeep-content-in-view","1.guide\u002F4.positioning\u002F1.keep-content-in-view",{"title":84,"path":85,"stem":86},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fuse-virtual-anchors","1.guide\u002F4.positioning\u002F2.use-virtual-anchors",{"title":88,"path":89,"stem":90},"Middleware Pipeline","\u002Fguide\u002Fpositioning\u002Fmiddleware-pipeline","1.guide\u002F4.positioning\u002F3.middleware-pipeline",{"title":92,"icon":93,"path":94,"stem":95,"children":96,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F5.accessibility",[97,101,105],{"title":98,"path":99,"stem":100},"Open State","\u002Fguide\u002Faccessibility\u002Fcontrol-open-state","1.guide\u002F5.accessibility\u002F1.control-open-state",{"title":102,"path":103,"stem":104},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F5.accessibility\u002F2.focus-models",{"title":106,"path":107,"stem":108},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F5.accessibility\u002F3.keyboard-navigation",{"title":110,"icon":111,"path":112,"stem":113,"children":114,"page":28},"Advanced","i-lucide-cpu","\u002Fguide\u002Fadvanced","1.guide\u002F6.advanced",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"Controlled vs Uncontrolled","\u002Fguide\u002Fadvanced\u002Fcontrolled-vs-uncontrolled","1.guide\u002F6.advanced\u002F1.controlled-vs-uncontrolled",{"title":120,"path":121,"stem":122},"Safe Polygons","\u002Fguide\u002Fadvanced\u002Fsafe-polygon-gotchas","1.guide\u002F6.advanced\u002F2.safe-polygon-gotchas",{"title":124,"path":125,"stem":126},"Virtual Anchor Gotchas","\u002Fguide\u002Fadvanced\u002Fvirtual-anchor-gotchas","1.guide\u002F6.advanced\u002F3.virtual-anchor-gotchas",{"title":128,"path":129,"stem":130},"Middleware Ordering","\u002Fguide\u002Fadvanced\u002Fmiddleware-ordering-gotchas","1.guide\u002F6.advanced\u002F4.middleware-ordering-gotchas",{"title":132,"path":133,"stem":134},"List Navigation","\u002Fguide\u002Fadvanced\u002Flist-navigation-gotchas","1.guide\u002F6.advanced\u002F5.list-navigation-gotchas",{"title":136,"icon":137,"path":138,"stem":139,"children":140},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[141,145,155,165,182,216,233],{"title":142,"path":138,"stem":143,"icon":144},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[151],{"title":152,"path":153,"stem":154},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[161],{"title":162,"path":163,"stem":164},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":74,"icon":166,"path":167,"stem":168,"children":169,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[170,174,178],{"title":171,"path":172,"stem":173},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":175,"path":176,"stem":177},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":179,"path":180,"stem":181},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":183,"icon":184,"path":185,"stem":186,"children":187,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[188,192,196,200,204,208,212],{"title":189,"path":190,"stem":191},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":193,"path":194,"stem":195},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":197,"path":198,"stem":199},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":201,"path":202,"stem":203},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":205,"path":206,"stem":207},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":209,"path":210,"stem":211},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":213,"path":214,"stem":215},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":106,"icon":217,"path":218,"stem":219,"children":220,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[221,225,229],{"title":222,"path":223,"stem":224},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":226,"path":227,"stem":228},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":230,"path":231,"stem":232},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":234,"icon":235,"path":236,"stem":237,"children":238,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[239,243,247,251,255,259,263,267],{"title":240,"path":241,"stem":242},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":244,"path":245,"stem":246},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":248,"path":249,"stem":250},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":252,"path":253,"stem":254},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":256,"path":257,"stem":258},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":260,"path":261,"stem":262},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":264,"path":265,"stem":266},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":268,"path":269,"stem":270},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":272,"title":21,"body":273,"description":1390,"extension":1391,"links":1392,"meta":1393,"navigation":429,"path":22,"seo":1394,"stem":23,"__hash__":1395},"docs\u002F1.guide\u002F1.getting-started\u002F2.first-tooltip.md",{"type":274,"value":275,"toc":1379},"minimark",[276,280,283,288,305,309,312,749,752,756,818,821,832,836,867,886,911,914,918,971,986,989,1023,1036,1058,1062,1075,1085,1089,1196,1199,1229,1252,1259,1263,1266,1336,1339,1343,1350,1363,1375],[277,278,279],"p",{},"A tooltip is the smallest floating surface you can build. That makes it the ideal first example because it uses every core VFloat piece without extra complexity.",[277,281,282],{},"By the end of this page you will have a tooltip that appears above a button on hover, closes when the pointer leaves, and keeps a small gap between itself and the trigger.",[284,285,287],"h2",{"id":286},"install","Install",[289,290,295],"pre",{"className":291,"code":292,"language":293,"meta":294,"style":294},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add v-float\n","sh","",[296,297,298],"code",{"__ignoreMap":294},[299,300,303],"span",{"class":301,"line":302},"line",1,[299,304,292],{},[284,306,308],{"id":307},"the-complete-example","The complete example",[277,310,311],{},"Here is the full working code. We will take it apart section by section right after.",[313,314,315,318],"code-preview",{},[316,317],"first-tooltip-demo",{},[319,320,321],"template",{"v-slot:code":294},[289,322,326],{"className":323,"code":324,"language":325,"meta":294,"style":294},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition, useHover } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"top\",\n  middlewares: { offset: 8 },\n});\n\nuseHover(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Save changes\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" role=\"tooltip\">This button saves your changes.\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[296,327,328,360,390,424,431,471,501,506,537,550,569,591,600,605,615,625,630,639,681,686,740],{"__ignoreMap":294},[299,329,330,334,338,342,345,348,351,355,357],{"class":301,"line":302},[299,331,333],{"class":332},"sMK4o","\u003C",[299,335,337],{"class":336},"swJcz","script",[299,339,341],{"class":340},"spNyl"," setup",[299,343,344],{"class":340}," lang",[299,346,347],{"class":332},"=",[299,349,350],{"class":332},"\"",[299,352,354],{"class":353},"sfazB","ts",[299,356,350],{"class":332},[299,358,359],{"class":332},">\n",[299,361,363,367,370,374,377,380,383,385,387],{"class":301,"line":362},2,[299,364,366],{"class":365},"s7zQu","import",[299,368,369],{"class":332}," {",[299,371,373],{"class":372},"sTEyZ"," ref",[299,375,376],{"class":332}," }",[299,378,379],{"class":365}," from",[299,381,382],{"class":332}," \"",[299,384,325],{"class":353},[299,386,350],{"class":332},[299,388,389],{"class":332},";\n",[299,391,393,395,397,400,403,406,408,411,413,415,417,420,422],{"class":301,"line":392},3,[299,394,366],{"class":365},[299,396,369],{"class":332},[299,398,399],{"class":372}," useFloatingNode",[299,401,402],{"class":332},",",[299,404,405],{"class":372}," usePosition",[299,407,402],{"class":332},[299,409,410],{"class":372}," useHover",[299,412,376],{"class":332},[299,414,379],{"class":365},[299,416,382],{"class":332},[299,418,419],{"class":353},"v-float",[299,421,350],{"class":332},[299,423,389],{"class":332},[299,425,427],{"class":301,"line":426},4,[299,428,430],{"emptyLinePlaceholder":429},true,"\n",[299,432,434,437,440,442,445,447,451,454,457,460,463,466,469],{"class":301,"line":433},5,[299,435,436],{"class":340},"const",[299,438,439],{"class":372}," anchorEl ",[299,441,347],{"class":332},[299,443,373],{"class":444},"s2Zo4",[299,446,333],{"class":332},[299,448,450],{"class":449},"sBMFI","HTMLElement",[299,452,453],{"class":332}," |",[299,455,456],{"class":449}," null",[299,458,459],{"class":332},">",[299,461,462],{"class":372},"(",[299,464,465],{"class":332},"null",[299,467,468],{"class":372},")",[299,470,389],{"class":332},[299,472,474,476,479,481,483,485,487,489,491,493,495,497,499],{"class":301,"line":473},6,[299,475,436],{"class":340},[299,477,478],{"class":372}," floatingEl ",[299,480,347],{"class":332},[299,482,373],{"class":444},[299,484,333],{"class":332},[299,486,450],{"class":449},[299,488,453],{"class":332},[299,490,456],{"class":449},[299,492,459],{"class":332},[299,494,462],{"class":372},[299,496,465],{"class":332},[299,498,468],{"class":372},[299,500,389],{"class":332},[299,502,504],{"class":301,"line":503},7,[299,505,430],{"emptyLinePlaceholder":429},[299,507,509,511,514,516,518,520,523,526,528,530,533,535],{"class":301,"line":508},8,[299,510,436],{"class":340},[299,512,513],{"class":372}," node ",[299,515,347],{"class":332},[299,517,399],{"class":444},[299,519,462],{"class":372},[299,521,522],{"class":332},"{",[299,524,525],{"class":372}," anchorEl",[299,527,402],{"class":332},[299,529,478],{"class":372},[299,531,532],{"class":332},"}",[299,534,468],{"class":372},[299,536,389],{"class":332},[299,538,540,542,545,547],{"class":301,"line":539},9,[299,541,171],{"class":444},[299,543,544],{"class":372},"(node",[299,546,402],{"class":332},[299,548,549],{"class":332}," {\n",[299,551,553,556,559,561,564,566],{"class":301,"line":552},10,[299,554,555],{"class":336},"  placement",[299,557,558],{"class":332},":",[299,560,382],{"class":332},[299,562,563],{"class":353},"top",[299,565,350],{"class":332},[299,567,568],{"class":332},",\n",[299,570,572,575,577,579,582,584,588],{"class":301,"line":571},11,[299,573,574],{"class":336},"  middlewares",[299,576,558],{"class":332},[299,578,369],{"class":332},[299,580,581],{"class":336}," offset",[299,583,558],{"class":332},[299,585,587],{"class":586},"sbssI"," 8",[299,589,590],{"class":332}," },\n",[299,592,594,596,598],{"class":301,"line":593},12,[299,595,532],{"class":332},[299,597,468],{"class":372},[299,599,389],{"class":332},[299,601,603],{"class":301,"line":602},13,[299,604,430],{"emptyLinePlaceholder":429},[299,606,608,610,613],{"class":301,"line":607},14,[299,609,193],{"class":444},[299,611,612],{"class":372},"(node)",[299,614,389],{"class":332},[299,616,618,621,623],{"class":301,"line":617},15,[299,619,620],{"class":332},"\u003C\u002F",[299,622,337],{"class":336},[299,624,359],{"class":332},[299,626,628],{"class":301,"line":627},16,[299,629,430],{"emptyLinePlaceholder":429},[299,631,633,635,637],{"class":301,"line":632},17,[299,634,333],{"class":332},[299,636,319],{"class":336},[299,638,359],{"class":332},[299,640,642,645,648,650,652,654,657,659,662,664,666,668,670,672,675,677,679],{"class":301,"line":641},18,[299,643,644],{"class":332},"  \u003C",[299,646,647],{"class":336},"button",[299,649,373],{"class":340},[299,651,347],{"class":332},[299,653,350],{"class":332},[299,655,656],{"class":353},"anchorEl",[299,658,350],{"class":332},[299,660,661],{"class":340}," type",[299,663,347],{"class":332},[299,665,350],{"class":332},[299,667,647],{"class":353},[299,669,350],{"class":332},[299,671,459],{"class":332},[299,673,674],{"class":372},"Save changes",[299,676,620],{"class":332},[299,678,647],{"class":336},[299,680,359],{"class":332},[299,682,684],{"class":301,"line":683},19,[299,685,430],{"emptyLinePlaceholder":429},[299,687,689,691,694,697,699,701,704,706,708,710,712,715,717,720,722,724,727,729,731,734,736,738],{"class":301,"line":688},20,[299,690,644],{"class":332},[299,692,693],{"class":336},"div",[299,695,696],{"class":340}," v-if",[299,698,347],{"class":332},[299,700,350],{"class":332},[299,702,703],{"class":353},"node.open.value",[299,705,350],{"class":332},[299,707,373],{"class":340},[299,709,347],{"class":332},[299,711,350],{"class":332},[299,713,714],{"class":353},"floatingEl",[299,716,350],{"class":332},[299,718,719],{"class":340}," role",[299,721,347],{"class":332},[299,723,350],{"class":332},[299,725,726],{"class":353},"tooltip",[299,728,350],{"class":332},[299,730,459],{"class":332},[299,732,733],{"class":372},"This button saves your changes.",[299,735,620],{"class":332},[299,737,693],{"class":336},[299,739,359],{"class":332},[299,741,743,745,747],{"class":301,"line":742},21,[299,744,620],{"class":332},[299,746,319],{"class":336},[299,748,359],{"class":332},[277,750,751],{},"That is the entire component: three composables, two refs, and one template. Let us walk through what each piece does.",[284,753,755],{"id":754},"two-refs-connect-the-dom","Two refs connect the DOM",[289,757,760],{"className":758,"code":759,"language":354,"meta":294,"style":294},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n",[296,761,762,790],{"__ignoreMap":294},[299,763,764,766,768,770,772,774,776,778,780,782,784,786,788],{"class":301,"line":302},[299,765,436],{"class":340},[299,767,439],{"class":372},[299,769,347],{"class":332},[299,771,373],{"class":444},[299,773,333],{"class":332},[299,775,450],{"class":449},[299,777,453],{"class":332},[299,779,456],{"class":449},[299,781,459],{"class":332},[299,783,462],{"class":372},[299,785,465],{"class":332},[299,787,468],{"class":372},[299,789,389],{"class":332},[299,791,792,794,796,798,800,802,804,806,808,810,812,814,816],{"class":301,"line":362},[299,793,436],{"class":340},[299,795,478],{"class":372},[299,797,347],{"class":332},[299,799,373],{"class":444},[299,801,333],{"class":332},[299,803,450],{"class":449},[299,805,453],{"class":332},[299,807,456],{"class":449},[299,809,459],{"class":332},[299,811,462],{"class":372},[299,813,465],{"class":332},[299,815,468],{"class":372},[299,817,389],{"class":332},[277,819,820],{},"VFloat needs to know about two DOM elements: the thing the surface is positioned against (the button), and the surface itself (the tooltip). These refs form the bridge between your template and the composables.",[277,822,823,824,827,828,831],{},"Bind them in the template with ",[296,825,826],{},"ref=\"anchorEl\""," and ",[296,829,830],{},"ref=\"floatingEl\"",", and VFloat reads their geometry once they render.",[284,833,835],{"id":834},"the-floating-node-ties-everything-together","The floating node ties everything together",[289,837,839],{"className":758,"code":838,"language":354,"meta":294,"style":294},"const node = useFloatingNode({ anchorEl, floatingEl });\n",[296,840,841],{"__ignoreMap":294},[299,842,843,845,847,849,851,853,855,857,859,861,863,865],{"class":301,"line":302},[299,844,436],{"class":340},[299,846,513],{"class":372},[299,848,347],{"class":332},[299,850,399],{"class":444},[299,852,462],{"class":372},[299,854,522],{"class":332},[299,856,525],{"class":372},[299,858,402],{"class":332},[299,860,478],{"class":372},[299,862,532],{"class":332},[299,864,468],{"class":372},[299,866,389],{"class":332},[277,868,869,874,875,881,882,885],{},[870,871,872],"a",{"href":163},[296,873,162],{}," creates a shared ",[870,876,878],{"href":877},"\u002Fapi\u002Foverview\u002Ftypes#floatingnode",[296,879,880],{},"FloatingNode"," object. It is a flat object without a nested ",[296,883,884],{},"state"," wrapper, holding the pieces you will use constantly:",[887,888,889,899],"ul",{},[890,891,892,898],"li",{},[893,894,895],"strong",{},[296,896,897],{},"node.refs",": the anchor, floating, and arrow element refs. Every companion composable reads from here.",[890,900,901,906,907,910],{},[893,902,903],{},[296,904,905],{},"node.open",": a mutable boolean ref (",[296,908,909],{},"Ref\u003Cboolean>",") that tracks whether the surface is currently visible. Interaction composables update this ref directly, and you can also read or mutate it yourself.",[277,912,913],{},"The node does not position elements and does not bind DOM event listeners. It acts as the shared coordinator that every other composable plugs into. Nothing happens without it, but it delegates the actual work to the other composables.",[284,915,917],{"id":916},"positioning-computes-and-applies-coordinates","Positioning computes and applies coordinates",[289,919,921],{"className":758,"code":920,"language":354,"meta":294,"style":294},"usePosition(node, {\n  placement: \"top\",\n  middlewares: { offset: 8 },\n});\n",[296,922,923,933,947,963],{"__ignoreMap":294},[299,924,925,927,929,931],{"class":301,"line":302},[299,926,171],{"class":444},[299,928,544],{"class":372},[299,930,402],{"class":332},[299,932,549],{"class":332},[299,934,935,937,939,941,943,945],{"class":301,"line":362},[299,936,555],{"class":336},[299,938,558],{"class":332},[299,940,382],{"class":332},[299,942,563],{"class":353},[299,944,350],{"class":332},[299,946,568],{"class":332},[299,948,949,951,953,955,957,959,961],{"class":301,"line":392},[299,950,574],{"class":336},[299,952,558],{"class":332},[299,954,369],{"class":332},[299,956,581],{"class":336},[299,958,558],{"class":332},[299,960,587],{"class":586},[299,962,590],{"class":332},[299,964,965,967,969],{"class":301,"line":426},[299,966,532],{"class":332},[299,968,468],{"class":372},[299,970,389],{"class":332},[277,972,973,977,978,981,982,985],{},[870,974,975],{"href":172},[296,976,171],{}," reads the anchor and floating element from the node, computes where the floating element should go, and automatically applies the positioning styles directly to the floating DOM element (",[296,979,980],{},"node.refs.floatingEl","). You don't need to manually bind ",[296,983,984],{},":style"," in your template.",[277,987,988],{},"Two options matter here:",[277,990,991,996,997,999,1000,999,1003,999,1006,999,1009,999,1012,1015,1016,827,1019,1022],{},[893,992,993],{},[296,994,995],{},"placement: \"top\""," puts the tooltip above the button. VFloat supports all twelve placements: ",[296,998,563],{},", ",[296,1001,1002],{},"top-start",[296,1004,1005],{},"top-end",[296,1007,1008],{},"bottom",[296,1010,1011],{},"bottom-start",[296,1013,1014],{},"bottom-end",", and the corresponding six for ",[296,1017,1018],{},"left",[296,1020,1021],{},"right",".",[277,1024,1025,1030,1031,1035],{},[893,1026,1027],{},[296,1028,1029],{},"middlewares: { offset: 8 }"," adds an 8-pixel gap between the anchor and the tooltip. Without it, the tooltip sits flush against the button, which is technically correct but visually cramped. ",[870,1032,1033],{"href":241},[296,1034,240],{}," is the simplest middleware, and the one you will reach for most often.",[277,1037,1038,1039,999,1043,1047,1048,1052,1053,1057],{},"Middlewares are small functions that adjust the final position. You will add more as the surface needs to respond to viewport edges (",[870,1040,1041],{"href":245},[296,1042,244],{},[870,1044,1045],{"href":249},[296,1046,248],{},"), constrain its size (",[870,1049,1050],{"href":257},[296,1051,256],{},"), or point an arrow back at the anchor (",[870,1054,1055],{"href":265},[296,1056,264],{},"). For a basic tooltip, offset alone is enough.",[284,1059,1061],{"id":1060},"hover-behavior-is-one-line","Hover behavior is one line",[289,1063,1065],{"className":758,"code":1064,"language":354,"meta":294,"style":294},"useHover(node);\n",[296,1066,1067],{"__ignoreMap":294},[299,1068,1069,1071,1073],{"class":301,"line":302},[299,1070,193],{"class":444},[299,1072,612],{"class":372},[299,1074,389],{"class":332},[277,1076,1077,1081,1082,1084],{},[870,1078,1079],{"href":194},[296,1080,193],{}," listens for pointer enter and leave events on the anchor and updates ",[296,1083,905],{}," automatically. You do not need to write event handlers or manage timeout IDs. The composable reads the element refs from the node and writes open state back to it.",[284,1086,1088],{"id":1087},"the-template-has-two-key-bindings","The template has two key bindings",[289,1090,1092],{"className":323,"code":1091,"language":325,"meta":294,"style":294},"\u003Cbutton ref=\"anchorEl\" type=\"button\">Save changes\u003C\u002Fbutton>\n\n\u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" role=\"tooltip\">\n  This button saves your changes.\n\u003C\u002Fdiv>\n",[296,1093,1094,1130,1134,1183,1188],{"__ignoreMap":294},[299,1095,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128],{"class":301,"line":302},[299,1097,333],{"class":332},[299,1099,647],{"class":336},[299,1101,373],{"class":340},[299,1103,347],{"class":332},[299,1105,350],{"class":332},[299,1107,656],{"class":353},[299,1109,350],{"class":332},[299,1111,661],{"class":340},[299,1113,347],{"class":332},[299,1115,350],{"class":332},[299,1117,647],{"class":353},[299,1119,350],{"class":332},[299,1121,459],{"class":332},[299,1123,674],{"class":372},[299,1125,620],{"class":332},[299,1127,647],{"class":336},[299,1129,359],{"class":332},[299,1131,1132],{"class":301,"line":362},[299,1133,430],{"emptyLinePlaceholder":429},[299,1135,1136,1138,1140,1142,1144,1146,1149,1151,1154,1156,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181],{"class":301,"line":392},[299,1137,333],{"class":332},[299,1139,693],{"class":336},[299,1141,696],{"class":365},[299,1143,347],{"class":332},[299,1145,350],{"class":332},[299,1147,1148],{"class":372},"node",[299,1150,1022],{"class":332},[299,1152,1153],{"class":372},"open",[299,1155,1022],{"class":332},[299,1157,1158],{"class":372},"value",[299,1160,350],{"class":332},[299,1162,373],{"class":340},[299,1164,347],{"class":332},[299,1166,350],{"class":332},[299,1168,714],{"class":353},[299,1170,350],{"class":332},[299,1172,719],{"class":340},[299,1174,347],{"class":332},[299,1176,350],{"class":332},[299,1178,726],{"class":353},[299,1180,350],{"class":332},[299,1182,359],{"class":332},[299,1184,1185],{"class":301,"line":426},[299,1186,1187],{"class":372},"  This button saves your changes.\n",[299,1189,1190,1192,1194],{"class":301,"line":433},[299,1191,620],{"class":332},[299,1193,693],{"class":336},[299,1195,359],{"class":332},[277,1197,1198],{},"Two lines do the structural work:",[887,1200,1201,1210],{},[890,1202,1203,1209],{},[893,1204,1205,827,1207],{},[296,1206,826],{},[296,1208,830],{}," give VFloat access to the rendered DOM nodes. Without these, the composables have nothing to position and nothing to listen to.",[890,1211,1212,1217,1218,1220,1221,1224,1225,1228],{},[893,1213,1214],{},[296,1215,1216],{},"v-if=\"node.open.value\""," mounts and unmounts the tooltip based on the shared open state. When ",[296,1219,193],{}," sets it to ",[296,1222,1223],{},"true",", the tooltip appears. When it sets it to ",[296,1226,1227],{},"false",", the tooltip disappears.",[277,1230,1231,1232,1234,1235,1237,1238,1240,1241,1244,1245,1247,1248,1251],{},"Notice that there is no ",[296,1233,984],{}," binding on ",[296,1236,714],{},". ",[296,1239,171],{}," automatically synchronizes positioning transforms directly onto the element. If you ever need manual control, you can pass ",[296,1242,1243],{},"{ applyStyles: false }"," to ",[296,1246,171],{}," and bind ",[296,1249,1250],{},":style=\"styles\""," yourself.",[277,1253,1254,1255,1258],{},"The ",[296,1256,1257],{},"role=\"tooltip\""," attribute tells assistive technology what the element is. It is not required for VFloat to function, but it matters for accessibility.",[284,1260,1262],{"id":1261},"what-happens-at-runtime","What happens at runtime",[277,1264,1265],{},"Tracing the full lifecycle clarifies how the pieces fit together:",[1267,1268,1269,1275,1281,1294,1308,1321,1324],"ol",{},[890,1270,1271,1272,1274],{},"The page renders. Both refs are ",[296,1273,465],{}," because the tooltip is not in the DOM yet.",[890,1276,1277,1278,1280],{},"The button renders and ",[296,1279,656],{}," receives a real DOM node.",[890,1282,1283,1284,1286,1287,1290,1291,1022],{},"The user hovers over the button. ",[296,1285,193],{}," detects ",[296,1288,1289],{},"pointerenter"," and sets ",[296,1292,1293],{},"node.open.value = true",[890,1295,1296,1298,1299,1301,1302,1305,1306,1280],{},[296,1297,703],{}," becomes ",[296,1300,1223],{},". The ",[296,1303,1304],{},"v-if"," mounts the tooltip. ",[296,1307,714],{},[890,1309,1310,1312,1313,827,1315,1318,1319,1022],{},[296,1311,171],{}," reads both element rects, applies ",[296,1314,995],{},[296,1316,1317],{},"offset: 8",", and applies the positioning styles directly to ",[296,1320,714],{},[890,1322,1323],{},"The tooltip appears above the button with the correct gap.",[890,1325,1326,1327,1329,1330,1301,1333,1335],{},"The pointer leaves. ",[296,1328,193],{}," sets ",[296,1331,1332],{},"node.open.value = false",[296,1334,1304],{}," unmounts the tooltip.",[277,1337,1338],{},"That loop (hover in, open, position, hover out, close) is the same for every floating surface. The interaction composables change; the node and the template bindings stay the same.",[284,1340,1342],{"id":1341},"where-to-go-next","Where to go next",[277,1344,1345,1346,1349],{},"This tooltip opens on hover but ignores keyboard users entirely. ",[870,1347,1348],{"href":59},"Build Accessible Tooltips"," adds focus behavior, safe polygon support, and proper ARIA wiring.",[277,1351,1352,1353,1356,1357,1359,1360,1362],{},"If you want a click-driven surface instead, ",[870,1354,1355],{"href":63},"Build Popovers and Dropdowns"," swaps ",[296,1358,193],{}," for ",[296,1361,189],{}," and adds outside-click dismissal.",[277,1364,1365,1366,1368,1369,999,1372,1374],{},"For a deeper look at the shared node, ",[870,1367,36],{"href":37}," explains the flat node shape (",[296,1370,1371],{},"refs",[296,1373,1153],{},", hierarchy methods) in detail.",[1376,1377,1378],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":294,"searchDepth":362,"depth":362,"links":1380},[1381,1382,1383,1384,1385,1386,1387,1388,1389],{"id":286,"depth":362,"text":287},{"id":307,"depth":362,"text":308},{"id":754,"depth":362,"text":755},{"id":834,"depth":362,"text":835},{"id":916,"depth":362,"text":917},{"id":1060,"depth":362,"text":1061},{"id":1087,"depth":362,"text":1088},{"id":1261,"depth":362,"text":1262},{"id":1341,"depth":362,"text":1342},"Build your first floating surface, a tooltip that opens on hover and stays in view.","md",null,{},{"title":21,"description":1390},"v2Qj_xJ3MrH8d3Uo6Nd8T_keoqdbdA5nc0sknsmJ0lc",[1397,1399],{"title":17,"path":18,"stem":19,"description":1398,"children":-1},"What VFloat is, what problem it solves, and how the pieces fit together.",{"title":25,"path":26,"stem":27,"description":1400,"children":-1},"Build a click-driven popover and see how VFloat changes behavior without changing the core shape.",1791046167331]