[{"data":1,"prerenderedAt":1245},["ShallowReactive",2],{"navigation_docs":3,"-guide-getting-started-first-popover":271,"-guide-getting-started-first-popover-surround":1240},[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":25,"body":273,"description":1234,"extension":1235,"links":1236,"meta":1237,"navigation":415,"path":26,"seo":1238,"stem":27,"__hash__":1239},"docs\u002F1.guide\u002F1.getting-started\u002F3.first-popover.md",{"type":274,"value":275,"toc":1227},"minimark",[276,280,283,288,291,798,801,805,951,964,983,987,1016,1019,1055,1061,1065,1166,1169,1189,1192,1196,1223],[277,278,279],"p",{},"A popover uses the same basic VFloat shape as the tooltip, but the interaction changes. Instead of opening on hover, it opens on click and stays open while the user works inside it.",[277,281,282],{},"By the end of this page, you will have a click-driven popover with outside-click and Escape key handling.",[284,285,287],"h2",{"id":286},"the-complete-example","The complete example",[277,289,290],{},"Here is the full working component before we break it down:",[292,293,298],"pre",{"className":294,"code":295,"language":296,"meta":297,"style":297},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useEscapeKey, useFloatingNode, useOutsideClick, usePosition } 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: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n  },\n});\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\">Open popover\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\">\n    \u003Cp>Popover content goes here.\u003C\u002Fp>\n    \u003Cbutton type=\"button\">Action\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[299,300,301,336,366,410,417,457,487,492,523,536,555,565,579,585,594,599,609,618,627,637,642,652,694,699,732,751,779,789],"code",{"__ignoreMap":297},[302,303,306,310,314,318,321,324,327,331,333],"span",{"class":304,"line":305},"line",1,[302,307,309],{"class":308},"sMK4o","\u003C",[302,311,313],{"class":312},"swJcz","script",[302,315,317],{"class":316},"spNyl"," setup",[302,319,320],{"class":316}," lang",[302,322,323],{"class":308},"=",[302,325,326],{"class":308},"\"",[302,328,330],{"class":329},"sfazB","ts",[302,332,326],{"class":308},[302,334,335],{"class":308},">\n",[302,337,339,343,346,350,353,356,359,361,363],{"class":304,"line":338},2,[302,340,342],{"class":341},"s7zQu","import",[302,344,345],{"class":308}," {",[302,347,349],{"class":348},"sTEyZ"," ref",[302,351,352],{"class":308}," }",[302,354,355],{"class":341}," from",[302,357,358],{"class":308}," \"",[302,360,296],{"class":329},[302,362,326],{"class":308},[302,364,365],{"class":308},";\n",[302,367,369,371,373,376,379,382,384,387,389,392,394,397,399,401,403,406,408],{"class":304,"line":368},3,[302,370,342],{"class":341},[302,372,345],{"class":308},[302,374,375],{"class":348}," useClick",[302,377,378],{"class":308},",",[302,380,381],{"class":348}," useEscapeKey",[302,383,378],{"class":308},[302,385,386],{"class":348}," useFloatingNode",[302,388,378],{"class":308},[302,390,391],{"class":348}," useOutsideClick",[302,393,378],{"class":308},[302,395,396],{"class":348}," usePosition",[302,398,352],{"class":308},[302,400,355],{"class":341},[302,402,358],{"class":308},[302,404,405],{"class":329},"v-float",[302,407,326],{"class":308},[302,409,365],{"class":308},[302,411,413],{"class":304,"line":412},4,[302,414,416],{"emptyLinePlaceholder":415},true,"\n",[302,418,420,423,426,428,431,433,437,440,443,446,449,452,455],{"class":304,"line":419},5,[302,421,422],{"class":316},"const",[302,424,425],{"class":348}," anchorEl ",[302,427,323],{"class":308},[302,429,349],{"class":430},"s2Zo4",[302,432,309],{"class":308},[302,434,436],{"class":435},"sBMFI","HTMLElement",[302,438,439],{"class":308}," |",[302,441,442],{"class":435}," null",[302,444,445],{"class":308},">",[302,447,448],{"class":348},"(",[302,450,451],{"class":308},"null",[302,453,454],{"class":348},")",[302,456,365],{"class":308},[302,458,460,462,465,467,469,471,473,475,477,479,481,483,485],{"class":304,"line":459},6,[302,461,422],{"class":316},[302,463,464],{"class":348}," floatingEl ",[302,466,323],{"class":308},[302,468,349],{"class":430},[302,470,309],{"class":308},[302,472,436],{"class":435},[302,474,439],{"class":308},[302,476,442],{"class":435},[302,478,445],{"class":308},[302,480,448],{"class":348},[302,482,451],{"class":308},[302,484,454],{"class":348},[302,486,365],{"class":308},[302,488,490],{"class":304,"line":489},7,[302,491,416],{"emptyLinePlaceholder":415},[302,493,495,497,500,502,504,506,509,512,514,516,519,521],{"class":304,"line":494},8,[302,496,422],{"class":316},[302,498,499],{"class":348}," node ",[302,501,323],{"class":308},[302,503,386],{"class":430},[302,505,448],{"class":348},[302,507,508],{"class":308},"{",[302,510,511],{"class":348}," anchorEl",[302,513,378],{"class":308},[302,515,464],{"class":348},[302,517,518],{"class":308},"}",[302,520,454],{"class":348},[302,522,365],{"class":308},[302,524,526,528,531,533],{"class":304,"line":525},9,[302,527,171],{"class":430},[302,529,530],{"class":348},"(node",[302,532,378],{"class":308},[302,534,535],{"class":308}," {\n",[302,537,539,542,545,547,550,552],{"class":304,"line":538},10,[302,540,541],{"class":312},"  placement",[302,543,544],{"class":308},":",[302,546,358],{"class":308},[302,548,549],{"class":329},"bottom-start",[302,551,326],{"class":308},[302,553,554],{"class":308},",\n",[302,556,558,561,563],{"class":304,"line":557},11,[302,559,560],{"class":312},"  middlewares",[302,562,544],{"class":308},[302,564,535],{"class":308},[302,566,568,571,573,577],{"class":304,"line":567},12,[302,569,570],{"class":312},"    offset",[302,572,544],{"class":308},[302,574,576],{"class":575},"sbssI"," 8",[302,578,554],{"class":308},[302,580,582],{"class":304,"line":581},13,[302,583,584],{"class":308},"  },\n",[302,586,588,590,592],{"class":304,"line":587},14,[302,589,518],{"class":308},[302,591,454],{"class":348},[302,593,365],{"class":308},[302,595,597],{"class":304,"line":596},15,[302,598,416],{"emptyLinePlaceholder":415},[302,600,602,604,607],{"class":304,"line":601},16,[302,603,189],{"class":430},[302,605,606],{"class":348},"(node)",[302,608,365],{"class":308},[302,610,612,614,616],{"class":304,"line":611},17,[302,613,205],{"class":430},[302,615,606],{"class":348},[302,617,365],{"class":308},[302,619,621,623,625],{"class":304,"line":620},18,[302,622,209],{"class":430},[302,624,606],{"class":348},[302,626,365],{"class":308},[302,628,630,633,635],{"class":304,"line":629},19,[302,631,632],{"class":308},"\u003C\u002F",[302,634,313],{"class":312},[302,636,335],{"class":308},[302,638,640],{"class":304,"line":639},20,[302,641,416],{"emptyLinePlaceholder":415},[302,643,645,647,650],{"class":304,"line":644},21,[302,646,309],{"class":308},[302,648,649],{"class":312},"template",[302,651,335],{"class":308},[302,653,655,658,661,663,665,667,670,672,675,677,679,681,683,685,688,690,692],{"class":304,"line":654},22,[302,656,657],{"class":308},"  \u003C",[302,659,660],{"class":312},"button",[302,662,349],{"class":316},[302,664,323],{"class":308},[302,666,326],{"class":308},[302,668,669],{"class":329},"anchorEl",[302,671,326],{"class":308},[302,673,674],{"class":316}," type",[302,676,323],{"class":308},[302,678,326],{"class":308},[302,680,660],{"class":329},[302,682,326],{"class":308},[302,684,445],{"class":308},[302,686,687],{"class":348},"Open popover",[302,689,632],{"class":308},[302,691,660],{"class":312},[302,693,335],{"class":308},[302,695,697],{"class":304,"line":696},23,[302,698,416],{"emptyLinePlaceholder":415},[302,700,702,704,707,710,712,714,717,719,721,723,725,728,730],{"class":304,"line":701},24,[302,703,657],{"class":308},[302,705,706],{"class":312},"div",[302,708,709],{"class":316}," v-if",[302,711,323],{"class":308},[302,713,326],{"class":308},[302,715,716],{"class":329},"node.open.value",[302,718,326],{"class":308},[302,720,349],{"class":316},[302,722,323],{"class":308},[302,724,326],{"class":308},[302,726,727],{"class":329},"floatingEl",[302,729,326],{"class":308},[302,731,335],{"class":308},[302,733,735,738,740,742,745,747,749],{"class":304,"line":734},25,[302,736,737],{"class":308},"    \u003C",[302,739,277],{"class":312},[302,741,445],{"class":308},[302,743,744],{"class":348},"Popover content goes here.",[302,746,632],{"class":308},[302,748,277],{"class":312},[302,750,335],{"class":308},[302,752,754,756,758,760,762,764,766,768,770,773,775,777],{"class":304,"line":753},26,[302,755,737],{"class":308},[302,757,660],{"class":312},[302,759,674],{"class":316},[302,761,323],{"class":308},[302,763,326],{"class":308},[302,765,660],{"class":329},[302,767,326],{"class":308},[302,769,445],{"class":308},[302,771,772],{"class":348},"Action",[302,774,632],{"class":308},[302,776,660],{"class":312},[302,778,335],{"class":308},[302,780,782,785,787],{"class":304,"line":781},27,[302,783,784],{"class":308},"  \u003C\u002F",[302,786,706],{"class":312},[302,788,335],{"class":308},[302,790,792,794,796],{"class":304,"line":791},28,[302,793,632],{"class":308},[302,795,649],{"class":312},[302,797,335],{"class":308},[277,799,800],{},"Notice how familiar this looks. The template and ref setup match the tooltip guide almost line for line. The only difference is in the interaction layer.",[284,802,804],{"id":803},"the-shared-node-and-positioning","The shared node and positioning",[292,806,809],{"className":807,"code":808,"language":330,"meta":297,"style":297},"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\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n  },\n});\n",[299,810,811,839,867,871,897,907,921,929,939,943],{"__ignoreMap":297},[302,812,813,815,817,819,821,823,825,827,829,831,833,835,837],{"class":304,"line":305},[302,814,422],{"class":316},[302,816,425],{"class":348},[302,818,323],{"class":308},[302,820,349],{"class":430},[302,822,309],{"class":308},[302,824,436],{"class":435},[302,826,439],{"class":308},[302,828,442],{"class":435},[302,830,445],{"class":308},[302,832,448],{"class":348},[302,834,451],{"class":308},[302,836,454],{"class":348},[302,838,365],{"class":308},[302,840,841,843,845,847,849,851,853,855,857,859,861,863,865],{"class":304,"line":338},[302,842,422],{"class":316},[302,844,464],{"class":348},[302,846,323],{"class":308},[302,848,349],{"class":430},[302,850,309],{"class":308},[302,852,436],{"class":435},[302,854,439],{"class":308},[302,856,442],{"class":435},[302,858,445],{"class":308},[302,860,448],{"class":348},[302,862,451],{"class":308},[302,864,454],{"class":348},[302,866,365],{"class":308},[302,868,869],{"class":304,"line":368},[302,870,416],{"emptyLinePlaceholder":415},[302,872,873,875,877,879,881,883,885,887,889,891,893,895],{"class":304,"line":412},[302,874,422],{"class":316},[302,876,499],{"class":348},[302,878,323],{"class":308},[302,880,386],{"class":430},[302,882,448],{"class":348},[302,884,508],{"class":308},[302,886,511],{"class":348},[302,888,378],{"class":308},[302,890,464],{"class":348},[302,892,518],{"class":308},[302,894,454],{"class":348},[302,896,365],{"class":308},[302,898,899,901,903,905],{"class":304,"line":419},[302,900,171],{"class":430},[302,902,530],{"class":348},[302,904,378],{"class":308},[302,906,535],{"class":308},[302,908,909,911,913,915,917,919],{"class":304,"line":459},[302,910,541],{"class":312},[302,912,544],{"class":308},[302,914,358],{"class":308},[302,916,549],{"class":329},[302,918,326],{"class":308},[302,920,554],{"class":308},[302,922,923,925,927],{"class":304,"line":489},[302,924,560],{"class":312},[302,926,544],{"class":308},[302,928,535],{"class":308},[302,930,931,933,935,937],{"class":304,"line":494},[302,932,570],{"class":312},[302,934,544],{"class":308},[302,936,576],{"class":575},[302,938,554],{"class":308},[302,940,941],{"class":304,"line":525},[302,942,584],{"class":308},[302,944,945,947,949],{"class":304,"line":538},[302,946,518],{"class":308},[302,948,454],{"class":348},[302,950,365],{"class":308},[277,952,953,954,959,960,963],{},"Just like the tooltip, ",[955,956,957],"a",{"href":163},[299,958,162],{}," creates the shared ",[299,961,962],{},"node"," that coordinates element refs and open state.",[277,965,966,970,971,974,975,979,980,982],{},[955,967,968],{"href":172},[299,969,171],{}," places the popover panel below the button aligned with its start edge (",[299,972,973],{},"\"bottom-start\"","), with an 8-pixel gap provided by ",[955,976,977],{"href":241},[299,978,240],{},", and applies the positioning styles automatically to ",[299,981,727],{},".",[284,984,986],{"id":985},"swapping-hover-for-click-outside-click-and-escape","Swapping hover for click, outside click, and Escape",[292,988,990],{"className":807,"code":989,"language":330,"meta":297,"style":297},"useClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n",[299,991,992,1000,1008],{"__ignoreMap":297},[302,993,994,996,998],{"class":304,"line":305},[302,995,189],{"class":430},[302,997,606],{"class":348},[302,999,365],{"class":308},[302,1001,1002,1004,1006],{"class":304,"line":338},[302,1003,205],{"class":430},[302,1005,606],{"class":348},[302,1007,365],{"class":308},[302,1009,1010,1012,1014],{"class":304,"line":368},[302,1011,209],{"class":430},[302,1013,606],{"class":348},[302,1015,365],{"class":308},[277,1017,1018],{},"This is where the popover departs from the tooltip:",[1020,1021,1022,1037,1046],"ul",{},[1023,1024,1025,1032,1033,1036],"li",{},[1026,1027,1028],"strong",{},[955,1029,1030],{"href":190},[299,1031,189],{}," toggles ",[299,1034,1035],{},"node.open"," when the anchor button is clicked, and prevents double-triggers on keyboard activation.",[1023,1038,1039,1045],{},[1026,1040,1041],{},[955,1042,1043],{"href":206},[299,1044,205],{}," listens for pointer interactions outside the popover family, closing the surface when the user clicks away.",[1023,1047,1048,1054],{},[1026,1049,1050],{},[955,1051,1052],{"href":210},[299,1053,209],{}," listens for Escape key presses, closing the popover while respecting IME text composition.",[277,1056,1057,1058,1060],{},"All three composables plug into the same ",[299,1059,962],{},", so they share the exact same open state without manual event plumbing.",[284,1062,1064],{"id":1063},"the-template-bindings","The template bindings",[292,1066,1068],{"className":294,"code":1067,"language":296,"meta":297,"style":297},"\u003Cbutton ref=\"anchorEl\" type=\"button\">Open popover\u003C\u002Fbutton>\n\n\u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\">\n  \u003Cp>Popover content goes here.\u003C\u002Fp>\n  \u003Cbutton type=\"button\">Action\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[299,1069,1070,1106,1110,1148,1153,1158],{"__ignoreMap":297},[302,1071,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100,1102,1104],{"class":304,"line":305},[302,1073,309],{"class":308},[302,1075,660],{"class":312},[302,1077,349],{"class":316},[302,1079,323],{"class":308},[302,1081,326],{"class":308},[302,1083,669],{"class":329},[302,1085,326],{"class":308},[302,1087,674],{"class":316},[302,1089,323],{"class":308},[302,1091,326],{"class":308},[302,1093,660],{"class":329},[302,1095,326],{"class":308},[302,1097,445],{"class":308},[302,1099,687],{"class":348},[302,1101,632],{"class":308},[302,1103,660],{"class":312},[302,1105,335],{"class":308},[302,1107,1108],{"class":304,"line":338},[302,1109,416],{"emptyLinePlaceholder":415},[302,1111,1112,1114,1116,1118,1120,1122,1124,1126,1129,1131,1134,1136,1138,1140,1142,1144,1146],{"class":304,"line":368},[302,1113,309],{"class":308},[302,1115,706],{"class":312},[302,1117,709],{"class":341},[302,1119,323],{"class":308},[302,1121,326],{"class":308},[302,1123,962],{"class":348},[302,1125,982],{"class":308},[302,1127,1128],{"class":348},"open",[302,1130,982],{"class":308},[302,1132,1133],{"class":348},"value",[302,1135,326],{"class":308},[302,1137,349],{"class":316},[302,1139,323],{"class":308},[302,1141,326],{"class":308},[302,1143,727],{"class":329},[302,1145,326],{"class":308},[302,1147,335],{"class":308},[302,1149,1150],{"class":304,"line":412},[302,1151,1152],{"class":348},"  \u003Cp>Popover content goes here.\u003C\u002Fp>\n",[302,1154,1155],{"class":304,"line":419},[302,1156,1157],{"class":348},"  \u003Cbutton type=\"button\">Action\u003C\u002Fbutton>\n",[302,1159,1160,1162,1164],{"class":304,"line":459},[302,1161,632],{"class":308},[302,1163,706],{"class":312},[302,1165,335],{"class":308},[277,1167,1168],{},"The template stays minimal:",[1020,1170,1171,1177,1183],{},[1023,1172,1173,1176],{},[299,1174,1175],{},"ref=\"anchorEl\""," connects the trigger button.",[1023,1178,1179,1182],{},[299,1180,1181],{},"ref=\"floatingEl\""," connects the floating panel (positioned automatically).",[1023,1184,1185,1188],{},[299,1186,1187],{},"v-if=\"node.open.value\""," renders the panel only when open.",[277,1190,1191],{},"Because the popover panel stays rendered while open, users can interact with form controls, buttons, or links inside it without the surface closing prematurely.",[284,1193,1195],{"id":1194},"where-to-go-next","Where to go next",[1020,1197,1198,1205,1211],{},[1023,1199,1200,1201,1204],{},"Read ",[955,1202,1203],{"href":99},"Control Open State"," to learn when to let VFloat manage open state and when the parent component should control it.",[1023,1206,1200,1207,1210],{},[955,1208,1209],{"href":63},"Build Popovers and Dropdowns"," for production enhancements like viewport boundary collisions and focus rules.",[1023,1212,1200,1213,1215,1216,1219,1220,1222],{},[955,1214,36],{"href":37}," for the complete reference on ",[299,1217,1218],{},"node.refs",", ",[299,1221,1035],{},", and node hierarchy methods.",[1224,1225,1226],"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 .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);}",{"title":297,"searchDepth":338,"depth":338,"links":1228},[1229,1230,1231,1232,1233],{"id":286,"depth":338,"text":287},{"id":803,"depth":338,"text":804},{"id":985,"depth":338,"text":986},{"id":1063,"depth":338,"text":1064},{"id":1194,"depth":338,"text":1195},"Build a click-driven popover and see how VFloat changes behavior without changing the core shape.","md",null,{},{"title":25,"description":1234},"B586QMCZc63OdQQygbzX65xBwWw0ie-8KF6afeYMORA",[1241,1243],{"title":21,"path":22,"stem":23,"description":1242,"children":-1},"Build your first floating surface, a tooltip that opens on hover and stays in view.",{"title":36,"path":37,"stem":38,"description":1244,"children":-1},"Understand the shared node object that ties VFloat behavior together.",1791046167428]