[{"data":1,"prerenderedAt":1117},["ShallowReactive",2],{"navigation_docs":3,"-guide-getting-started-introduction":271,"-guide-getting-started-introduction-surround":1114},[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":17,"body":273,"description":1108,"extension":1109,"links":1110,"meta":1111,"navigation":458,"path":18,"seo":1112,"stem":19,"__hash__":1113},"docs\u002F1.guide\u002F1.getting-started\u002F1.introduction.md",{"type":274,"value":275,"toc":1100},"minimark",[276,281,285,289,292,295,299,311,337,340,812,830,834,845,848,878,881,969,972,1026,1030,1040,1043,1047,1054,1057,1089,1096],[277,278,280],"h2",{"id":279},"what-is-vfloat","What is VFloat?",[282,283,284],"p",{},"VFloat is a Vue 3 library for building floating UI elements like tooltips, popovers, dropdown menus, and dialogs. It provides composable building blocks for positioning calculations, user interactions, focus management, and overlay coordination without imposing markup, styles, or prebuilt components.",[277,286,288],{"id":287},"why-you-need-vfloat","Why you need VFloat",[282,290,291],{},"Building floating UI by hand requires solving geometric collisions, event timing, and focus management from scratch. A simple tooltip needs viewport detection to avoid clipping and hover delays to avoid flickering. A dropdown menu needs keyboard navigation, outside-click detection, and Escape key handling.",[282,293,294],{},"Pre-built component libraries solve these problems, but they force their markup, styles, and design tokens on you. VFloat handles the positioning math, DOM listeners, and state coordination behind the scenes, letting you build custom, fully accessible floating surfaces using your own templates and styles.",[277,296,298],{"id":297},"how-it-works","How it works",[282,300,301,302,306,307,310],{},"Every floating surface comes down to two questions: ",[303,304,305],"strong",{},"where"," should it appear, and ",[303,308,309],{},"when"," should it be visible? VFloat divides these responsibilities across dedicated composables connected by a shared floating node:",[312,313,314,323,330],"ul",{},[315,316,317,322],"li",{},[303,318,319],{},[320,321,162],"code",{}," holds the shared state and element references used by the various composables.",[315,324,325,329],{},[303,326,327],{},[320,328,171],{}," handles the positioning calculations. It computes where to place your floating element and automatically applies the computed positioning styles to your floating element.",[315,331,332,336],{},[303,333,334],{},[320,335,193],{}," decides when the floating element should be visible and when it should hide based on hover behavior.",[282,338,339],{},"Here is a minimal tooltip that ties these three parts together:",[341,342,347],"pre",{"className":343,"code":344,"language":345,"meta":346,"style":346},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useEscapeKey, useFloatingNode, usePosition, useHover } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\n\u002F\u002F 1. Hold shared state and element refs\nconst node = useFloatingNode({ anchorEl, floatingEl });\n\n\u002F\u002F 2. WHERE: calculate coordinates and auto-apply styles\nusePosition(node, {\n  placement: \"top\",\n  middlewares: { offset: 8 },\n});\n\n\u002F\u002F 3. WHEN: manage visibility based on user input\nuseHover(node);\nuseEscapeKey(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Hover me\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" role=\"tooltip\">Tooltip content\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[320,348,349,384,414,453,460,500,530,535,542,573,578,584,597,616,638,647,652,658,668,677,687,692,702,744,749,803],{"__ignoreMap":346},[350,351,354,358,362,366,369,372,375,379,381],"span",{"class":352,"line":353},"line",1,[350,355,357],{"class":356},"sMK4o","\u003C",[350,359,361],{"class":360},"swJcz","script",[350,363,365],{"class":364},"spNyl"," setup",[350,367,368],{"class":364}," lang",[350,370,371],{"class":356},"=",[350,373,374],{"class":356},"\"",[350,376,378],{"class":377},"sfazB","ts",[350,380,374],{"class":356},[350,382,383],{"class":356},">\n",[350,385,387,391,394,398,401,404,407,409,411],{"class":352,"line":386},2,[350,388,390],{"class":389},"s7zQu","import",[350,392,393],{"class":356}," {",[350,395,397],{"class":396},"sTEyZ"," ref",[350,399,400],{"class":356}," }",[350,402,403],{"class":389}," from",[350,405,406],{"class":356}," \"",[350,408,345],{"class":377},[350,410,374],{"class":356},[350,412,413],{"class":356},";\n",[350,415,417,419,421,424,427,430,432,435,437,440,442,444,446,449,451],{"class":352,"line":416},3,[350,418,390],{"class":389},[350,420,393],{"class":356},[350,422,423],{"class":396}," useEscapeKey",[350,425,426],{"class":356},",",[350,428,429],{"class":396}," useFloatingNode",[350,431,426],{"class":356},[350,433,434],{"class":396}," usePosition",[350,436,426],{"class":356},[350,438,439],{"class":396}," useHover",[350,441,400],{"class":356},[350,443,403],{"class":389},[350,445,406],{"class":356},[350,447,448],{"class":377},"v-float",[350,450,374],{"class":356},[350,452,413],{"class":356},[350,454,456],{"class":352,"line":455},4,[350,457,459],{"emptyLinePlaceholder":458},true,"\n",[350,461,463,466,469,471,474,476,480,483,486,489,492,495,498],{"class":352,"line":462},5,[350,464,465],{"class":364},"const",[350,467,468],{"class":396}," anchorEl ",[350,470,371],{"class":356},[350,472,397],{"class":473},"s2Zo4",[350,475,357],{"class":356},[350,477,479],{"class":478},"sBMFI","HTMLElement",[350,481,482],{"class":356}," |",[350,484,485],{"class":478}," null",[350,487,488],{"class":356},">",[350,490,491],{"class":396},"(",[350,493,494],{"class":356},"null",[350,496,497],{"class":396},")",[350,499,413],{"class":356},[350,501,503,505,508,510,512,514,516,518,520,522,524,526,528],{"class":352,"line":502},6,[350,504,465],{"class":364},[350,506,507],{"class":396}," floatingEl ",[350,509,371],{"class":356},[350,511,397],{"class":473},[350,513,357],{"class":356},[350,515,479],{"class":478},[350,517,482],{"class":356},[350,519,485],{"class":478},[350,521,488],{"class":356},[350,523,491],{"class":396},[350,525,494],{"class":356},[350,527,497],{"class":396},[350,529,413],{"class":356},[350,531,533],{"class":352,"line":532},7,[350,534,459],{"emptyLinePlaceholder":458},[350,536,538],{"class":352,"line":537},8,[350,539,541],{"class":540},"sHwdD","\u002F\u002F 1. Hold shared state and element refs\n",[350,543,545,547,550,552,554,556,559,562,564,566,569,571],{"class":352,"line":544},9,[350,546,465],{"class":364},[350,548,549],{"class":396}," node ",[350,551,371],{"class":356},[350,553,429],{"class":473},[350,555,491],{"class":396},[350,557,558],{"class":356},"{",[350,560,561],{"class":396}," anchorEl",[350,563,426],{"class":356},[350,565,507],{"class":396},[350,567,568],{"class":356},"}",[350,570,497],{"class":396},[350,572,413],{"class":356},[350,574,576],{"class":352,"line":575},10,[350,577,459],{"emptyLinePlaceholder":458},[350,579,581],{"class":352,"line":580},11,[350,582,583],{"class":540},"\u002F\u002F 2. WHERE: calculate coordinates and auto-apply styles\n",[350,585,587,589,592,594],{"class":352,"line":586},12,[350,588,171],{"class":473},[350,590,591],{"class":396},"(node",[350,593,426],{"class":356},[350,595,596],{"class":356}," {\n",[350,598,600,603,606,608,611,613],{"class":352,"line":599},13,[350,601,602],{"class":360},"  placement",[350,604,605],{"class":356},":",[350,607,406],{"class":356},[350,609,610],{"class":377},"top",[350,612,374],{"class":356},[350,614,615],{"class":356},",\n",[350,617,619,622,624,626,629,631,635],{"class":352,"line":618},14,[350,620,621],{"class":360},"  middlewares",[350,623,605],{"class":356},[350,625,393],{"class":356},[350,627,628],{"class":360}," offset",[350,630,605],{"class":356},[350,632,634],{"class":633},"sbssI"," 8",[350,636,637],{"class":356}," },\n",[350,639,641,643,645],{"class":352,"line":640},15,[350,642,568],{"class":356},[350,644,497],{"class":396},[350,646,413],{"class":356},[350,648,650],{"class":352,"line":649},16,[350,651,459],{"emptyLinePlaceholder":458},[350,653,655],{"class":352,"line":654},17,[350,656,657],{"class":540},"\u002F\u002F 3. WHEN: manage visibility based on user input\n",[350,659,661,663,666],{"class":352,"line":660},18,[350,662,193],{"class":473},[350,664,665],{"class":396},"(node)",[350,667,413],{"class":356},[350,669,671,673,675],{"class":352,"line":670},19,[350,672,209],{"class":473},[350,674,665],{"class":396},[350,676,413],{"class":356},[350,678,680,683,685],{"class":352,"line":679},20,[350,681,682],{"class":356},"\u003C\u002F",[350,684,361],{"class":360},[350,686,383],{"class":356},[350,688,690],{"class":352,"line":689},21,[350,691,459],{"emptyLinePlaceholder":458},[350,693,695,697,700],{"class":352,"line":694},22,[350,696,357],{"class":356},[350,698,699],{"class":360},"template",[350,701,383],{"class":356},[350,703,705,708,711,713,715,717,720,722,725,727,729,731,733,735,738,740,742],{"class":352,"line":704},23,[350,706,707],{"class":356},"  \u003C",[350,709,710],{"class":360},"button",[350,712,397],{"class":364},[350,714,371],{"class":356},[350,716,374],{"class":356},[350,718,719],{"class":377},"anchorEl",[350,721,374],{"class":356},[350,723,724],{"class":364}," type",[350,726,371],{"class":356},[350,728,374],{"class":356},[350,730,710],{"class":377},[350,732,374],{"class":356},[350,734,488],{"class":356},[350,736,737],{"class":396},"Hover me",[350,739,682],{"class":356},[350,741,710],{"class":360},[350,743,383],{"class":356},[350,745,747],{"class":352,"line":746},24,[350,748,459],{"emptyLinePlaceholder":458},[350,750,752,754,757,760,762,764,767,769,771,773,775,778,780,783,785,787,790,792,794,797,799,801],{"class":352,"line":751},25,[350,753,707],{"class":356},[350,755,756],{"class":360},"div",[350,758,759],{"class":364}," v-if",[350,761,371],{"class":356},[350,763,374],{"class":356},[350,765,766],{"class":377},"node.open.value",[350,768,374],{"class":356},[350,770,397],{"class":364},[350,772,371],{"class":356},[350,774,374],{"class":356},[350,776,777],{"class":377},"floatingEl",[350,779,374],{"class":356},[350,781,782],{"class":364}," role",[350,784,371],{"class":356},[350,786,374],{"class":356},[350,788,789],{"class":377},"tooltip",[350,791,374],{"class":356},[350,793,488],{"class":356},[350,795,796],{"class":396},"Tooltip content",[350,798,682],{"class":356},[350,800,756],{"class":360},[350,802,383],{"class":356},[350,804,806,808,810],{"class":352,"line":805},26,[350,807,682],{"class":356},[350,809,699],{"class":360},[350,811,383],{"class":356},[282,813,814,815,818,819,821,822,824,825,829],{},"Because both composables plug into the same ",[320,816,817],{},"node",", they work together automatically. When ",[320,820,193],{}," opens the tooltip, ",[320,823,171],{}," computes its placement. The ",[826,827,828],"a",{"href":22},"first tooltip guide"," walks through the full component step by step.",[277,831,833],{"id":832},"building-different-surfaces","Building different surfaces",[282,835,836,837,840,841,844],{},"You won't find a ",[320,838,839],{},"\u003CMenu>"," component or a ",[320,842,843],{},"useTooltip()"," composable in VFloat. That's intentional. Instead, you get a set of focused composables that you mix and match to build whatever you need.",[282,846,847],{},"Want to turn the tooltip from above into a popover? Swap hover for click, and add outside-click dismissal and Escape key handling:",[341,849,852],{"className":850,"code":851,"language":378,"meta":346,"style":346},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","useClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n",[320,853,854,862,870],{"__ignoreMap":346},[350,855,856,858,860],{"class":352,"line":353},[350,857,189],{"class":473},[350,859,665],{"class":396},[350,861,413],{"class":356},[350,863,864,866,868],{"class":352,"line":386},[350,865,205],{"class":473},[350,867,665],{"class":396},[350,869,413],{"class":356},[350,871,872,874,876],{"class":352,"line":416},[350,873,209],{"class":473},[350,875,665],{"class":396},[350,877,413],{"class":356},[282,879,880],{},"Building a dropdown menu? Keep the click trigger and add roving keyboard focus:",[341,882,884],{"className":850,"code":883,"language":378,"meta":346,"style":346},"const itemEls = shallowRef\u003C(HTMLElement | null)[]>([]);\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\nuseRovingFocus(node, { elementsList: itemEls });\n",[320,885,886,918,922,930,938,946],{"__ignoreMap":346},[350,887,888,890,893,895,898,900,902,904,906,908,911,913,916],{"class":352,"line":353},[350,889,465],{"class":364},[350,891,892],{"class":396}," itemEls ",[350,894,371],{"class":356},[350,896,897],{"class":473}," shallowRef",[350,899,357],{"class":356},[350,901,491],{"class":396},[350,903,479],{"class":478},[350,905,482],{"class":356},[350,907,485],{"class":478},[350,909,910],{"class":396},")[]",[350,912,488],{"class":356},[350,914,915],{"class":396},"([])",[350,917,413],{"class":356},[350,919,920],{"class":352,"line":386},[350,921,459],{"emptyLinePlaceholder":458},[350,923,924,926,928],{"class":352,"line":416},[350,925,189],{"class":473},[350,927,665],{"class":396},[350,929,413],{"class":356},[350,931,932,934,936],{"class":352,"line":455},[350,933,205],{"class":473},[350,935,665],{"class":396},[350,937,413],{"class":356},[350,939,940,942,944],{"class":352,"line":462},[350,941,209],{"class":473},[350,943,665],{"class":396},[350,945,413],{"class":356},[350,947,948,950,952,954,956,959,961,963,965,967],{"class":352,"line":502},[350,949,222],{"class":473},[350,951,591],{"class":396},[350,953,426],{"class":356},[350,955,393],{"class":356},[350,957,958],{"class":360}," elementsList",[350,960,605],{"class":356},[350,962,892],{"class":396},[350,964,568],{"class":356},[350,966,497],{"class":396},[350,968,413],{"class":356},[282,970,971],{},"Need a modal dialog? Add focus management to trap focus inside the dialog while it's open:",[341,973,975],{"className":850,"code":974,"language":378,"meta":346,"style":346},"useClick(node);\nuseFocusTrap(node, { modal: true });\nuseOutsideClick(node);\nuseEscapeKey(node);\n",[320,976,977,985,1010,1018],{"__ignoreMap":346},[350,978,979,981,983],{"class":352,"line":353},[350,980,189],{"class":473},[350,982,665],{"class":396},[350,984,413],{"class":356},[350,986,987,989,991,993,995,998,1000,1004,1006,1008],{"class":352,"line":386},[350,988,201],{"class":473},[350,990,591],{"class":396},[350,992,426],{"class":356},[350,994,393],{"class":356},[350,996,997],{"class":360}," modal",[350,999,605],{"class":356},[350,1001,1003],{"class":1002},"sfNiH"," true",[350,1005,400],{"class":356},[350,1007,497],{"class":396},[350,1009,413],{"class":356},[350,1011,1012,1014,1016],{"class":352,"line":416},[350,1013,205],{"class":473},[350,1015,665],{"class":396},[350,1017,413],{"class":356},[350,1019,1020,1022,1024],{"class":352,"line":455},[350,1021,209],{"class":473},[350,1023,665],{"class":396},[350,1025,413],{"class":356},[277,1027,1029],{"id":1028},"relationship-to-floating-ui","Relationship to Floating UI",[282,1031,1032,1033,1039],{},"VFloat draws heavily from ",[826,1034,1038],{"href":1035,"rel":1036},"https:\u002F\u002Ffloating-ui.com",[1037],"nofollow","Floating UI",". The middleware pipeline (offset, flip, shift, size, arrow, hide, autoPlacement) follows the same mental model, and some composable names will look familiar.",[282,1041,1042],{},"However, VFloat is a dedicated Vue 3 library with its own reactive API shape. If you are coming from Floating UI, the core concepts transfer, but the call sites and reactive state patterns do not.",[277,1044,1046],{"id":1045},"where-to-go-next","Where to go next",[282,1048,1049,1050,1053],{},"If this is your first time with VFloat, ",[826,1051,1052],{"href":22},"build a tooltip"," step by step to see how all the pieces connect in a real component.",[282,1055,1056],{},"If you already know what you're building, pick the closest guide:",[312,1058,1059,1065,1071,1077,1083],{},[315,1060,1061,1064],{},[826,1062,1063],{"href":59},"Build Accessible Tooltips",": hover and focus triggers, ARIA roles, delay behavior",[315,1066,1067,1070],{},[826,1068,1069],{"href":63},"Build Popovers and Dropdowns",": click triggers, outside click dismissal, richer content",[315,1072,1073,1076],{},[826,1074,1075],{"href":71},"Build Nested Menus",": keyboard navigation, submenus, tree coordination",[315,1078,1079,1082],{},[826,1080,1081],{"href":67},"Build Dialogs and Modals",": focus trapping, modal behavior, return focus",[315,1084,1085,1088],{},[826,1086,1087],{"href":85},"Use Virtual Anchors",": context menus, cursor-following surfaces, coordinate-based positioning",[282,1090,1091,1092,1095],{},"When you need exact signatures and defaults, the ",[826,1093,136],{"href":1094},"\u002Fapi\u002F"," has every option and return value documented.",[1097,1098,1099],"style",{},"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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":346,"searchDepth":386,"depth":386,"links":1101},[1102,1103,1104,1105,1106,1107],{"id":279,"depth":386,"text":280},{"id":287,"depth":386,"text":288},{"id":297,"depth":386,"text":298},{"id":832,"depth":386,"text":833},{"id":1028,"depth":386,"text":1029},{"id":1045,"depth":386,"text":1046},"What VFloat is, what problem it solves, and how the pieces fit together.","md",null,{},{"title":17,"description":1108},"1j6xtLcad-X2_QcF8jtb5fYJlC7LAk92rIFZ59A_nmQ",[1110,1115],{"title":21,"path":22,"stem":23,"description":1116,"children":-1},"Build your first floating surface, a tooltip that opens on hover and stays in view.",1791046164975]