[{"data":1,"prerenderedAt":707},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-popout-hover":12,"i-ph:code":705},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":698,"extension":699,"meta":700,"navigation":152,"path":701,"seo":702,"stem":703,"__hash__":704},"docs\u002Fdocs\u002Fcomponents\u002Fpopout-hover.md","Popout Hover",{"type":16,"value":17,"toc":694},"minimark",[18,22,39,59,515,520,537,642,646,690],[19,20,14],"h1",{"id":21},"popout-hover",[23,24,25,26,30,31,34,35,38],"p",{},"A convenience wrapper around ",[27,28,29],"code",{},"Popout"," that automatically shows and hides the popout based on hover and focus events. Unlike ",[27,32,33],{},"Tooltip",", the content inside ",[27,36,37],{},"PopoutHover"," is fully interactive - users can move their mouse into the popout and interact with its contents.",[40,41,42],"blockquote",{},[23,43,44,45,47,48,50,51,54,55,58],{},"Please note: ",[27,46,37],{}," (and the underlying ",[27,49,29],{},") cannot be styled using ",[27,52,53],{},"scoped"," CSS in Vue SFC. Define a separate non-scoped ",[27,56,57],{},"\u003Cstyle>"," block to style the popout container.",[60,61,63],"popout-hover-example",{"source-path":62},"Popout\u002FPopoutHover.vue",[64,65,70],"pre",{"className":66,"code":67,"language":68,"meta":69,"style":69},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Avatar, Badge, Button, PopoutHover } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CPopoutHover class=\"popout-hover-example\">\n    \u003Ctemplate #trigger>\n      \u003CBadge variant=\"success\" filled>\n        Online\n      \u003C\u002FBadge>\n    \u003C\u002Ftemplate>\n    \u003CFlex y-start gap=\"m\">\n      \u003Cbutton class=\"pointer\">\n        \u003CAvatar url=\"https:\u002F\u002Fgithub.com\u002Fdolanske.png\" \u002F>\n      \u003C\u002Fbutton>\n      \u003Cdiv>\n        \u003Cspan class=\"text-bold block mb-xxs\">dolanske\u003C\u002Fspan>\n        \u003Cp class=\"text-color-light text-s block mb-xs\">\n          Frontend engineer. The guy who made all of this yayyy!\n        \u003C\u002Fp>\n        \u003Cp class=\"text-color-light text-s\">\n          Checkout my \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdolanske\">Github\u003C\u002Fa>!\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002FFlex>\n  \u003C\u002FPopoutHover>\n\u003C\u002Ftemplate>\n","vue","",[27,71,72,92,137,147,154,164,187,204,230,237,247,257,282,303,327,336,346,376,396,402,412,432,469,478,487,496,506],{"__ignoreMap":69},[73,74,77,81,85,89],"span",{"class":75,"line":76},"line",1,[73,78,80],{"class":79},"sP76a","\u003C",[73,82,84],{"class":83},"sKpE2","script",[73,86,88],{"class":87},"sflEz"," setup",[73,90,91],{"class":79},">\n",[73,93,95,98,101,104,107,110,112,115,117,120,123,126,130,134],{"class":75,"line":94},2,[73,96,97],{"class":83},"import",[73,99,100],{"class":79}," {",[73,102,103],{"class":87}," Avatar",[73,105,106],{"class":79},",",[73,108,109],{"class":87}," Badge",[73,111,106],{"class":79},[73,113,114],{"class":87}," Button",[73,116,106],{"class":79},[73,118,119],{"class":87}," PopoutHover",[73,121,122],{"class":79}," }",[73,124,125],{"class":83}," from",[73,127,129],{"class":128},"sBR95"," '",[73,131,133],{"class":132},"sfmH-","@dolanske\u002Fvui",[73,135,136],{"class":128},"'\n",[73,138,140,143,145],{"class":75,"line":139},3,[73,141,142],{"class":79},"\u003C\u002F",[73,144,84],{"class":83},[73,146,91],{"class":79},[73,148,150],{"class":75,"line":149},4,[73,151,153],{"emptyLinePlaceholder":152},true,"\n",[73,155,157,159,162],{"class":75,"line":156},5,[73,158,80],{"class":79},[73,160,161],{"class":83},"template",[73,163,91],{"class":79},[73,165,167,170,172,175,178,181,183,185],{"class":75,"line":166},6,[73,168,169],{"class":79},"  \u003C",[73,171,37],{"class":83},[73,173,174],{"class":87}," class",[73,176,177],{"class":79},"=",[73,179,180],{"class":128},"\"",[73,182,60],{"class":132},[73,184,180],{"class":128},[73,186,91],{"class":79},[73,188,190,193,195,198,202],{"class":75,"line":189},7,[73,191,192],{"class":79},"    \u003C",[73,194,161],{"class":83},[73,196,197],{"class":79}," #",[73,199,201],{"class":200},"sRTv0","trigger",[73,203,91],{"class":79},[73,205,207,210,213,216,218,220,223,225,228],{"class":75,"line":206},8,[73,208,209],{"class":79},"      \u003C",[73,211,212],{"class":83},"Badge",[73,214,215],{"class":87}," variant",[73,217,177],{"class":79},[73,219,180],{"class":128},[73,221,222],{"class":132},"success",[73,224,180],{"class":128},[73,226,227],{"class":87}," filled",[73,229,91],{"class":79},[73,231,233],{"class":75,"line":232},9,[73,234,236],{"class":235},"sX1ls","        Online\n",[73,238,240,243,245],{"class":75,"line":239},10,[73,241,242],{"class":79},"      \u003C\u002F",[73,244,212],{"class":83},[73,246,91],{"class":79},[73,248,250,253,255],{"class":75,"line":249},11,[73,251,252],{"class":79},"    \u003C\u002F",[73,254,161],{"class":83},[73,256,91],{"class":79},[73,258,260,262,265,268,271,273,275,278,280],{"class":75,"line":259},12,[73,261,192],{"class":79},[73,263,264],{"class":83},"Flex",[73,266,267],{"class":87}," y-start",[73,269,270],{"class":87}," gap",[73,272,177],{"class":79},[73,274,180],{"class":128},[73,276,277],{"class":132},"m",[73,279,180],{"class":128},[73,281,91],{"class":79},[73,283,285,287,290,292,294,296,299,301],{"class":75,"line":284},13,[73,286,209],{"class":79},[73,288,289],{"class":83},"button",[73,291,174],{"class":87},[73,293,177],{"class":79},[73,295,180],{"class":128},[73,297,298],{"class":132},"pointer",[73,300,180],{"class":128},[73,302,91],{"class":79},[73,304,306,309,312,315,317,319,322,324],{"class":75,"line":305},14,[73,307,308],{"class":79},"        \u003C",[73,310,311],{"class":83},"Avatar",[73,313,314],{"class":87}," url",[73,316,177],{"class":79},[73,318,180],{"class":128},[73,320,321],{"class":132},"https:\u002F\u002Fgithub.com\u002Fdolanske.png",[73,323,180],{"class":128},[73,325,326],{"class":79}," \u002F>\n",[73,328,330,332,334],{"class":75,"line":329},15,[73,331,242],{"class":79},[73,333,289],{"class":83},[73,335,91],{"class":79},[73,337,339,341,344],{"class":75,"line":338},16,[73,340,209],{"class":79},[73,342,343],{"class":83},"div",[73,345,91],{"class":79},[73,347,349,351,353,355,357,359,362,364,367,370,372,374],{"class":75,"line":348},17,[73,350,308],{"class":79},[73,352,73],{"class":83},[73,354,174],{"class":87},[73,356,177],{"class":79},[73,358,180],{"class":128},[73,360,361],{"class":132},"text-bold block mb-xxs",[73,363,180],{"class":128},[73,365,366],{"class":79},">",[73,368,369],{"class":235},"dolanske",[73,371,142],{"class":79},[73,373,73],{"class":83},[73,375,91],{"class":79},[73,377,379,381,383,385,387,389,392,394],{"class":75,"line":378},18,[73,380,308],{"class":79},[73,382,23],{"class":83},[73,384,174],{"class":87},[73,386,177],{"class":79},[73,388,180],{"class":128},[73,390,391],{"class":132},"text-color-light text-s block mb-xs",[73,393,180],{"class":128},[73,395,91],{"class":79},[73,397,399],{"class":75,"line":398},19,[73,400,401],{"class":235},"          Frontend engineer. The guy who made all of this yayyy!\n",[73,403,405,408,410],{"class":75,"line":404},20,[73,406,407],{"class":79},"        \u003C\u002F",[73,409,23],{"class":83},[73,411,91],{"class":79},[73,413,415,417,419,421,423,425,428,430],{"class":75,"line":414},21,[73,416,308],{"class":79},[73,418,23],{"class":83},[73,420,174],{"class":87},[73,422,177],{"class":79},[73,424,180],{"class":128},[73,426,427],{"class":132},"text-color-light text-s",[73,429,180],{"class":128},[73,431,91],{"class":79},[73,433,435,438,440,443,446,448,450,453,455,457,460,462,464,466],{"class":75,"line":434},22,[73,436,437],{"class":235},"          Checkout my ",[73,439,80],{"class":79},[73,441,442],{"class":83},"a",[73,444,445],{"class":87}," href",[73,447,177],{"class":79},[73,449,180],{"class":128},[73,451,452],{"class":132},"https:\u002F\u002Fgithub.com\u002Fdolanske",[73,454,180],{"class":128},[73,456,366],{"class":79},[73,458,459],{"class":235},"Github",[73,461,142],{"class":79},[73,463,442],{"class":83},[73,465,366],{"class":79},[73,467,468],{"class":235},"!\n",[73,470,472,474,476],{"class":75,"line":471},23,[73,473,407],{"class":79},[73,475,23],{"class":83},[73,477,91],{"class":79},[73,479,481,483,485],{"class":75,"line":480},24,[73,482,242],{"class":79},[73,484,343],{"class":83},[73,486,91],{"class":79},[73,488,490,492,494],{"class":75,"line":489},25,[73,491,252],{"class":79},[73,493,264],{"class":83},[73,495,91],{"class":79},[73,497,499,502,504],{"class":75,"line":498},26,[73,500,501],{"class":79},"  \u003C\u002F",[73,503,37],{"class":83},[73,505,91],{"class":79},[73,507,509,511,513],{"class":75,"line":508},27,[73,510,142],{"class":79},[73,512,161],{"class":83},[73,514,91],{"class":79},[516,517,519],"h3",{"id":518},"props","Props",[23,521,522,524,525,528,529,532,533,536],{},[27,523,37],{}," accepts all props from ",[442,526,29],{"href":527},"\u002Fdocs\u002Fcomponents\u002Fpopout"," except ",[27,530,531],{},"anchor"," and ",[27,534,535],{},"visible",". The following additional prop is available:",[538,539,540,556],"table",{},[541,542,543],"thead",{},[544,545,546,550,553],"tr",{},[547,548,549],"th",{},"Name",[547,551,552],{},"Default",[547,554,555],{},"Type",[557,558,559,582,602,620],"tbody",{},[544,560,561,567,572],{},[562,563,564],"td",{},[27,565,566],{},"disabled",[562,568,569],{},[27,570,571],{},"false",[562,573,574,577,578,581],{},[27,575,576],{},"boolean"," ",[579,580],"br",{}," When true, the popout will not open on hover. The trigger slot content remains visible",[544,583,584,589,594],{},[562,585,586],{},[27,587,588],{},"enter-delay",[562,590,591],{},[27,592,593],{},"200",[562,595,596,577,599,601],{},[27,597,598],{},"number",[579,600],{}," Delay in milliseconds before the popout becomes visible after hovering in",[544,603,604,609,613],{},[562,605,606],{},[27,607,608],{},"leave-delay",[562,610,611],{},[27,612,593],{},[562,614,615,577,617,619],{},[27,616,598],{},[579,618],{}," Delay in milliseconds before the popout hides after the cursor leaves",[544,621,622,627,632],{},[562,623,624],{},[27,625,626],{},"placement",[562,628,629],{},[27,630,631],{},"top",[562,633,634,577,637,639,640],{},[27,635,636],{},"string",[579,638],{}," Position of the popout relative to the trigger. Inherits all placement values from ",[27,641,29],{},[516,643,645],{"id":644},"slots","Slots",[538,647,648,660],{},[541,649,650],{},[544,651,652,654,657],{},[547,653,549],{},[547,655,656],{},"Accepts",[547,658,659],{},"Description",[557,661,662,676],{},[544,663,664,668,673],{},[562,665,666],{},[27,667,201],{},[562,669,670],{},[27,671,672],{},"any",[562,674,675],{},"The element that triggers the popout on hover or focus",[544,677,678,683,687],{},[562,679,680],{},[27,681,682],{},"default",[562,684,685],{},[27,686,672],{},[562,688,689],{},"The interactive content rendered inside the popout",[691,692,693],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .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);}",{"title":69,"searchDepth":94,"depth":94,"links":695},[696,697],{"id":518,"depth":139,"text":519},{"id":644,"depth":139,"text":645},"A convenience wrapper around Popout that automatically shows and hides the popout based on hover and focus events. Unlike Tooltip, the content inside PopoutHover is fully interactive - users can move their mouse into the popout and interact with its contents.","md",{},"\u002Fdocs\u002Fcomponents\u002Fpopout-hover",{"title":14,"description":698},"docs\u002Fcomponents\u002Fpopout-hover","h2TVcCdyjf903Nw5dPmEbHhUXNOxPBhbIDgyaw28O5s",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":706},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200883111]