[{"data":1,"prerenderedAt":1172},["ShallowReactive",2],{"navigation_docs":3,"-guide-components-build-accessible-tooltips":271,"-guide-components-build-accessible-tooltips-surround":1167},[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":58,"body":273,"description":1161,"extension":1162,"links":1163,"meta":1164,"navigation":420,"path":59,"seo":1165,"stem":60,"__hash__":1166},"docs\u002F1.guide\u002F3.components\u002F1.build-accessible-tooltips.md",{"type":274,"value":275,"toc":1151},"minimark",[276,280,283,293,298,301,818,822,868,874,904,911,919,930,935,941,947,958,973,977,1103,1106,1124,1128,1147],[277,278,279],"p",{},"Tooltips are small, but the interaction details matter. A good tooltip opens from the right triggers, stays out of the way, and does not disappear the moment the pointer crosses the gap between the trigger and the surface.",[277,281,282],{},"This guide builds an accessible tooltip that works for two user paths:",[284,285,286,290],"ul",{},[287,288,289],"li",{},"A mouse user hovering over the trigger",[287,291,292],{},"A keyboard user tabbing to the trigger",[294,295,297],"h2",{"id":296},"the-complete-example","The complete example",[277,299,300],{},"Here is the full working tooltip before we disassemble each part:",[302,303,308],"pre",{"className":304,"code":305,"language":306,"meta":307,"style":307},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition, useFocus, 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: {\n    offset: 8,\n  },\n});\n\nuseHover(node, {\n  safePolygon: true,\n});\n\nuseFocus(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" aria-describedby=\"save-tooltip\">Save draft\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" id=\"save-tooltip\" ref=\"floatingEl\" role=\"tooltip\">\n    Save the current draft without publishing it.\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[309,310,311,346,376,415,422,462,492,497,528,541,560,570,584,590,599,604,615,629,638,643,653,663,668,678,732,737,793,799,809],"code",{"__ignoreMap":307},[312,313,316,320,324,328,331,334,337,341,343],"span",{"class":314,"line":315},"line",1,[312,317,319],{"class":318},"sMK4o","\u003C",[312,321,323],{"class":322},"swJcz","script",[312,325,327],{"class":326},"spNyl"," setup",[312,329,330],{"class":326}," lang",[312,332,333],{"class":318},"=",[312,335,336],{"class":318},"\"",[312,338,340],{"class":339},"sfazB","ts",[312,342,336],{"class":318},[312,344,345],{"class":318},">\n",[312,347,349,353,356,360,363,366,369,371,373],{"class":314,"line":348},2,[312,350,352],{"class":351},"s7zQu","import",[312,354,355],{"class":318}," {",[312,357,359],{"class":358},"sTEyZ"," ref",[312,361,362],{"class":318}," }",[312,364,365],{"class":351}," from",[312,367,368],{"class":318}," \"",[312,370,306],{"class":339},[312,372,336],{"class":318},[312,374,375],{"class":318},";\n",[312,377,379,381,383,386,389,392,394,397,399,402,404,406,408,411,413],{"class":314,"line":378},3,[312,380,352],{"class":351},[312,382,355],{"class":318},[312,384,385],{"class":358}," useFloatingNode",[312,387,388],{"class":318},",",[312,390,391],{"class":358}," usePosition",[312,393,388],{"class":318},[312,395,396],{"class":358}," useFocus",[312,398,388],{"class":318},[312,400,401],{"class":358}," useHover",[312,403,362],{"class":318},[312,405,365],{"class":351},[312,407,368],{"class":318},[312,409,410],{"class":339},"v-float",[312,412,336],{"class":318},[312,414,375],{"class":318},[312,416,418],{"class":314,"line":417},4,[312,419,421],{"emptyLinePlaceholder":420},true,"\n",[312,423,425,428,431,433,436,438,442,445,448,451,454,457,460],{"class":314,"line":424},5,[312,426,427],{"class":326},"const",[312,429,430],{"class":358}," anchorEl ",[312,432,333],{"class":318},[312,434,359],{"class":435},"s2Zo4",[312,437,319],{"class":318},[312,439,441],{"class":440},"sBMFI","HTMLElement",[312,443,444],{"class":318}," |",[312,446,447],{"class":440}," null",[312,449,450],{"class":318},">",[312,452,453],{"class":358},"(",[312,455,456],{"class":318},"null",[312,458,459],{"class":358},")",[312,461,375],{"class":318},[312,463,465,467,470,472,474,476,478,480,482,484,486,488,490],{"class":314,"line":464},6,[312,466,427],{"class":326},[312,468,469],{"class":358}," floatingEl ",[312,471,333],{"class":318},[312,473,359],{"class":435},[312,475,319],{"class":318},[312,477,441],{"class":440},[312,479,444],{"class":318},[312,481,447],{"class":440},[312,483,450],{"class":318},[312,485,453],{"class":358},[312,487,456],{"class":318},[312,489,459],{"class":358},[312,491,375],{"class":318},[312,493,495],{"class":314,"line":494},7,[312,496,421],{"emptyLinePlaceholder":420},[312,498,500,502,505,507,509,511,514,517,519,521,524,526],{"class":314,"line":499},8,[312,501,427],{"class":326},[312,503,504],{"class":358}," node ",[312,506,333],{"class":318},[312,508,385],{"class":435},[312,510,453],{"class":358},[312,512,513],{"class":318},"{",[312,515,516],{"class":358}," anchorEl",[312,518,388],{"class":318},[312,520,469],{"class":358},[312,522,523],{"class":318},"}",[312,525,459],{"class":358},[312,527,375],{"class":318},[312,529,531,533,536,538],{"class":314,"line":530},9,[312,532,171],{"class":435},[312,534,535],{"class":358},"(node",[312,537,388],{"class":318},[312,539,540],{"class":318}," {\n",[312,542,544,547,550,552,555,557],{"class":314,"line":543},10,[312,545,546],{"class":322},"  placement",[312,548,549],{"class":318},":",[312,551,368],{"class":318},[312,553,554],{"class":339},"top",[312,556,336],{"class":318},[312,558,559],{"class":318},",\n",[312,561,563,566,568],{"class":314,"line":562},11,[312,564,565],{"class":322},"  middlewares",[312,567,549],{"class":318},[312,569,540],{"class":318},[312,571,573,576,578,582],{"class":314,"line":572},12,[312,574,575],{"class":322},"    offset",[312,577,549],{"class":318},[312,579,581],{"class":580},"sbssI"," 8",[312,583,559],{"class":318},[312,585,587],{"class":314,"line":586},13,[312,588,589],{"class":318},"  },\n",[312,591,593,595,597],{"class":314,"line":592},14,[312,594,523],{"class":318},[312,596,459],{"class":358},[312,598,375],{"class":318},[312,600,602],{"class":314,"line":601},15,[312,603,421],{"emptyLinePlaceholder":420},[312,605,607,609,611,613],{"class":314,"line":606},16,[312,608,193],{"class":435},[312,610,535],{"class":358},[312,612,388],{"class":318},[312,614,540],{"class":318},[312,616,618,621,623,627],{"class":314,"line":617},17,[312,619,620],{"class":322},"  safePolygon",[312,622,549],{"class":318},[312,624,626],{"class":625},"sfNiH"," true",[312,628,559],{"class":318},[312,630,632,634,636],{"class":314,"line":631},18,[312,633,523],{"class":318},[312,635,459],{"class":358},[312,637,375],{"class":318},[312,639,641],{"class":314,"line":640},19,[312,642,421],{"emptyLinePlaceholder":420},[312,644,646,648,651],{"class":314,"line":645},20,[312,647,197],{"class":435},[312,649,650],{"class":358},"(node)",[312,652,375],{"class":318},[312,654,656,659,661],{"class":314,"line":655},21,[312,657,658],{"class":318},"\u003C\u002F",[312,660,323],{"class":322},[312,662,345],{"class":318},[312,664,666],{"class":314,"line":665},22,[312,667,421],{"emptyLinePlaceholder":420},[312,669,671,673,676],{"class":314,"line":670},23,[312,672,319],{"class":318},[312,674,675],{"class":322},"template",[312,677,345],{"class":318},[312,679,681,684,687,689,691,693,696,698,701,703,705,707,709,712,714,716,719,721,723,726,728,730],{"class":314,"line":680},24,[312,682,683],{"class":318},"  \u003C",[312,685,686],{"class":322},"button",[312,688,359],{"class":326},[312,690,333],{"class":318},[312,692,336],{"class":318},[312,694,695],{"class":339},"anchorEl",[312,697,336],{"class":318},[312,699,700],{"class":326}," type",[312,702,333],{"class":318},[312,704,336],{"class":318},[312,706,686],{"class":339},[312,708,336],{"class":318},[312,710,711],{"class":326}," aria-describedby",[312,713,333],{"class":318},[312,715,336],{"class":318},[312,717,718],{"class":339},"save-tooltip",[312,720,336],{"class":318},[312,722,450],{"class":318},[312,724,725],{"class":358},"Save draft",[312,727,658],{"class":318},[312,729,686],{"class":322},[312,731,345],{"class":318},[312,733,735],{"class":314,"line":734},25,[312,736,421],{"emptyLinePlaceholder":420},[312,738,740,742,745,748,750,752,755,757,760,762,764,766,768,770,772,774,777,779,782,784,786,789,791],{"class":314,"line":739},26,[312,741,683],{"class":318},[312,743,744],{"class":322},"div",[312,746,747],{"class":326}," v-if",[312,749,333],{"class":318},[312,751,336],{"class":318},[312,753,754],{"class":339},"node.open.value",[312,756,336],{"class":318},[312,758,759],{"class":326}," id",[312,761,333],{"class":318},[312,763,336],{"class":318},[312,765,718],{"class":339},[312,767,336],{"class":318},[312,769,359],{"class":326},[312,771,333],{"class":318},[312,773,336],{"class":318},[312,775,776],{"class":339},"floatingEl",[312,778,336],{"class":318},[312,780,781],{"class":326}," role",[312,783,333],{"class":318},[312,785,336],{"class":318},[312,787,788],{"class":339},"tooltip",[312,790,336],{"class":318},[312,792,345],{"class":318},[312,794,796],{"class":314,"line":795},27,[312,797,798],{"class":358},"    Save the current draft without publishing it.\n",[312,800,802,805,807],{"class":314,"line":801},28,[312,803,804],{"class":318},"  \u003C\u002F",[312,806,744],{"class":322},[312,808,345],{"class":318},[312,810,812,814,816],{"class":314,"line":811},29,[312,813,658],{"class":318},[312,815,675],{"class":322},[312,817,345],{"class":318},[294,819,821],{"id":820},"pointer-and-keyboard-triggers","Pointer and keyboard triggers",[302,823,826],{"className":824,"code":825,"language":340,"meta":307,"style":307},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","useHover(node, {\n  safePolygon: true,\n});\n\nuseFocus(node);\n",[309,827,828,838,848,856,860],{"__ignoreMap":307},[312,829,830,832,834,836],{"class":314,"line":315},[312,831,193],{"class":435},[312,833,535],{"class":358},[312,835,388],{"class":318},[312,837,540],{"class":318},[312,839,840,842,844,846],{"class":314,"line":348},[312,841,620],{"class":322},[312,843,549],{"class":318},[312,845,626],{"class":625},[312,847,559],{"class":318},[312,849,850,852,854],{"class":314,"line":378},[312,851,523],{"class":318},[312,853,459],{"class":358},[312,855,375],{"class":318},[312,857,858],{"class":314,"line":417},[312,859,421],{"emptyLinePlaceholder":420},[312,861,862,864,866],{"class":314,"line":424},[312,863,197],{"class":435},[312,865,650],{"class":358},[312,867,375],{"class":318},[277,869,870,871,549],{},"Two composables share the same ",[309,872,873],{},"node",[284,875,876,891],{},[287,877,878,886,887,890],{},[879,880,881],"strong",{},[882,883,884],"a",{"href":194},[309,885,193],{}," opens the tooltip on pointer enter and closes it on pointer leave. Setting ",[309,888,889],{},"safePolygon: true"," keeps the tooltip open while the pointer travels across the 8-pixel gap toward the tooltip content.",[287,892,893,899,900,903],{},[879,894,895],{},[882,896,897],{"href":198},[309,898,197],{}," opens the tooltip when a keyboard user tabs to the button, respecting ",[309,901,902],{},":focus-visible"," so mouse clicks do not spuriously re-trigger focus tooltips.",[277,905,906,907,910],{},"Because both composables update the same ",[309,908,909],{},"node.open"," state, pointer and keyboard interactions never fight each other.",[294,912,914,915,918],{"id":913},"why-safepolygon-matters","Why ",[309,916,917],{},"safePolygon"," matters",[277,920,921,922,925,926,929],{},"Once you add ",[309,923,924],{},"middlewares: { offset: 8 }",", there is a visible gap between the trigger and the tooltip. If hover closes immediately on ",[309,927,928],{},"pointerleave",", the tooltip disappears while the pointer is still traveling naturally toward it.",[277,931,932,934],{},[309,933,889],{}," computes a triangular or rectangular corridor connecting the cursor's exit position with the bounds of the floating panel. As long as the cursor moves through that corridor toward the tooltip, the surface stays open.",[294,936,938,939],{"id":937},"when-to-skip-safepolygon","When to skip ",[309,940,917],{},[277,942,943,944,946],{},"Skip ",[309,945,917],{}," when:",[284,948,949,952,955],{},[287,950,951],{},"The tooltip content contains no interactive elements and does not need to be selectable",[287,953,954],{},"There is no gap between the anchor and the floating panel",[287,956,957],{},"The surface should close the instant the cursor leaves the trigger boundary",[277,959,960,961,964,965,968,969,972],{},"For deeper tuning options like ",[309,962,963],{},"buffer"," and ",[309,966,967],{},"requireIntent",", read ",[882,970,971],{"href":121},"Safe Polygon Gotchas",".",[294,974,976],{"id":975},"semantic-template-bindings","Semantic template bindings",[302,978,980],{"className":304,"code":979,"language":306,"meta":307,"style":307},"\u003Cbutton ref=\"anchorEl\" type=\"button\" aria-describedby=\"save-tooltip\">Save draft\u003C\u002Fbutton>\n\n\u003Cdiv v-if=\"node.open.value\" id=\"save-tooltip\" ref=\"floatingEl\" role=\"tooltip\">\n  Save the current draft without publishing it.\n\u003C\u002Fdiv>\n",[309,981,982,1028,1032,1090,1095],{"__ignoreMap":307},[312,983,984,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026],{"class":314,"line":315},[312,985,319],{"class":318},[312,987,686],{"class":322},[312,989,359],{"class":326},[312,991,333],{"class":318},[312,993,336],{"class":318},[312,995,695],{"class":339},[312,997,336],{"class":318},[312,999,700],{"class":326},[312,1001,333],{"class":318},[312,1003,336],{"class":318},[312,1005,686],{"class":339},[312,1007,336],{"class":318},[312,1009,711],{"class":326},[312,1011,333],{"class":318},[312,1013,336],{"class":318},[312,1015,718],{"class":339},[312,1017,336],{"class":318},[312,1019,450],{"class":318},[312,1021,725],{"class":358},[312,1023,658],{"class":318},[312,1025,686],{"class":322},[312,1027,345],{"class":318},[312,1029,1030],{"class":314,"line":348},[312,1031,421],{"emptyLinePlaceholder":420},[312,1033,1034,1036,1038,1040,1042,1044,1046,1048,1051,1053,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088],{"class":314,"line":378},[312,1035,319],{"class":318},[312,1037,744],{"class":322},[312,1039,747],{"class":351},[312,1041,333],{"class":318},[312,1043,336],{"class":318},[312,1045,873],{"class":358},[312,1047,972],{"class":318},[312,1049,1050],{"class":358},"open",[312,1052,972],{"class":318},[312,1054,1055],{"class":358},"value",[312,1057,336],{"class":318},[312,1059,759],{"class":326},[312,1061,333],{"class":318},[312,1063,336],{"class":318},[312,1065,718],{"class":339},[312,1067,336],{"class":318},[312,1069,359],{"class":326},[312,1071,333],{"class":318},[312,1073,336],{"class":318},[312,1075,776],{"class":339},[312,1077,336],{"class":318},[312,1079,781],{"class":326},[312,1081,333],{"class":318},[312,1083,336],{"class":318},[312,1085,788],{"class":339},[312,1087,336],{"class":318},[312,1089,345],{"class":318},[312,1091,1092],{"class":314,"line":417},[312,1093,1094],{"class":358},"  Save the current draft without publishing it.\n",[312,1096,1097,1099,1101],{"class":314,"line":424},[312,1098,658],{"class":318},[312,1100,744],{"class":322},[312,1102,345],{"class":318},[277,1104,1105],{},"Two accessibility attributes ensure screen readers understand the relationship:",[284,1107,1108,1114],{},[287,1109,1110,1113],{},[309,1111,1112],{},"role=\"tooltip\""," identifies the floating panel as an accessible description.",[287,1115,1116,1119,1120,1123],{},[309,1117,1118],{},"aria-describedby=\"save-tooltip\""," on the anchor associates the trigger with the tooltip's ",[309,1121,1122],{},"id",". When a screen reader focuses the button, it automatically announces the tooltip content.",[294,1125,1127],{"id":1126},"where-to-go-next","Where to go next",[284,1129,1130,1137,1142],{},[287,1131,1132,1133,1136],{},"Read ",[882,1134,1135],{"href":63},"Build Popovers and Dropdowns"," if your surface should be click-driven instead.",[287,1138,1132,1139,1141],{},[882,1140,102],{"href":103}," to explore keyboard focus patterns in greater depth.",[287,1143,1132,1144,1146],{},[882,1145,971],{"href":121}," to tune or debug cursor corridors.",[1148,1149,1150],"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 pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":307,"searchDepth":348,"depth":348,"links":1152},[1153,1154,1155,1157,1159,1160],{"id":296,"depth":348,"text":297},{"id":820,"depth":348,"text":821},{"id":913,"depth":348,"text":1156},"Why safePolygon matters",{"id":937,"depth":348,"text":1158},"When to skip safePolygon",{"id":975,"depth":348,"text":976},{"id":1126,"depth":348,"text":1127},"Build accessible tooltips with the right interaction and dismissal behavior.","md",null,{},{"title":58,"description":1161},"Z1VPvfpTGpQYCvS7qunK6n3eFDhvG4Arr0iGDfFIZdU",[1168,1170],{"title":48,"path":49,"stem":50,"description":1169,"children":-1},"Understand how VFloat coordinates nested overlays, submenus, and composite floating surface hierarchies.",{"title":62,"path":63,"stem":64,"description":1171,"children":-1},"Compose popovers and dropdowns with click, focus, and dismissal patterns.",1791046165701]