[{"data":1,"prerenderedAt":1768},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"components-tooltip":10,"i-ph:code":1764,"i-ph:info":1766},{"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>",{"id":11,"title":12,"body":13,"description":23,"extension":1759,"meta":1760,"navigation":151,"path":33,"seo":1761,"stem":1762,"__hash__":1763},"docs\u002Fdocs\u002Fcomponents\u002Ftooltip.md","Tooltip",{"type":14,"value":15,"toc":1754},"minimark",[16,20,24,58,1441,1446,1577,1581,1625,1629,1632,1750],[17,18,12],"h1",{"id":19},"tooltip",[21,22,23],"p",{},"The Tooltip component displays additional information when hovering over an element. It's commonly used to provide context or explanations for UI elements.",[25,26,27],"blockquote",{},[21,28,29,30,34,35,39,40,44,45,49,50,53,54,57],{},"Plese note: components using popout (",[31,32,12],"a",{"href":33},"\u002Fdocs\u002Fcomponents\u002Ftooltip",", ",[31,36,38],{"href":37},"\u002Fdocs\u002Fcomponents\u002Fdropdown","Dropdown"," & ",[31,41,43],{"href":42},"\u002Fdocs\u002Fcomponents\u002Fpopout","Popout",") cannot be styled using ",[46,47,48],"code",{},"scoped"," CSS in Vue SFC. However, you can just define a new ",[46,51,52],{},"\u003Cstyle>"," tag, style the popout inside and keep rest of your CSS scoped in a separate ",[46,55,56],{},"\u003Cstyle scoped>",".",[59,60,62],"tooltip-example",{"source-path":61},"Tooltip\u002FTooltip.vue",[63,64,69],"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Button, Flex, Grid, Tooltip } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGrid gap=\"l\" :columns=\"2\">\n    \u003Cdiv>\n      \u003Cstrong class=\"text-m mb-s block text-semibold\">\n        Basic Usage\n      \u003C\u002Fstrong>\n      \u003CTooltip>\n        \u003CButton>Hover me\u003C\u002FButton>\n        \u003Ctemplate #tooltip>\n          \u003Cp>This is a tooltip\u003C\u002Fp>\n        \u003C\u002Ftemplate>\n      \u003C\u002FTooltip>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Cstrong class=\"text-m mb-s block text-semibold\">\n        Different Placements\n      \u003C\u002Fstrong>\n      \u003CFlex gap=\"m\">\n        \u003CTooltip placement=\"top\">\n          \u003CButton>Top\u003C\u002FButton>\n          \u003Ctemplate #tooltip>\n            \u003Cp>Top tooltip\u003C\u002Fp>\n          \u003C\u002Ftemplate>\n        \u003C\u002FTooltip>\n\n        \u003CTooltip placement=\"right\">\n          \u003CButton>Right\u003C\u002FButton>\n          \u003Ctemplate #tooltip>\n            \u003Cp>Right tooltip\u003C\u002Fp>\n          \u003C\u002Ftemplate>\n        \u003C\u002FTooltip>\n\n        \u003CTooltip placement=\"bottom\">\n          \u003CButton>Bottom\u003C\u002FButton>\n          \u003Ctemplate #tooltip>\n            \u003Cp>Bottom tooltip\u003C\u002Fp>\n          \u003C\u002Ftemplate>\n        \u003C\u002FTooltip>\n\n        \u003CTooltip placement=\"left\">\n          \u003CButton>Left\u003C\u002FButton>\n          \u003Ctemplate #tooltip>\n            \u003Cp>Left tooltip\u003C\u002Fp>\n          \u003C\u002Ftemplate>\n        \u003C\u002FTooltip>\n      \u003C\u002FFlex>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Cstrong class=\"text-m mb-s block text-semibold\">\n        With Enter Delay\n      \u003C\u002Fstrong>\n      \u003CTooltip enter-delay=\"500\">\n        \u003CButton>Hover me (500ms delay)\u003C\u002FButton>\n        \u003Ctemplate #tooltip>\n          \u003Cp>This tooltip appears after 500ms\u003C\u002Fp>\n        \u003C\u002Ftemplate>\n      \u003C\u002FTooltip>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Cstrong class=\"text-m mb-s block text-semibold\">\n        With Leave Delay\n      \u003C\u002Fstrong>\n      \u003CTooltip leave-delay=\"500\">\n        \u003CButton>Hover me (closes after 500ms)\u003C\u002FButton>\n        \u003Ctemplate #tooltip>\n          \u003Cp>This tooltip stays for 500ms after you stop hovering\u003C\u002Fp>\n        \u003C\u002Ftemplate>\n      \u003C\u002FTooltip>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Cstrong class=\"text-m mb-s block text-semibold\">\n        With Icon\n      \u003C\u002Fstrong>\n      \u003CTooltip>\n        \u003CIconInfo :size=\"24\" \u002F>\n        \u003Ctemplate #tooltip>\n          \u003Cp>Additional information\u003C\u002Fp>\n        \u003C\u002Ftemplate>\n      \u003C\u002FTooltip>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv>\n      \u003Cstrong class=\"text-m mb-s block text-semibold\">\n        With Formatted Content\n      \u003C\u002Fstrong>\n      \u003CTooltip>\n        \u003CButton>Hover for details\u003C\u002FButton>\n        \u003Ctemplate #tooltip>\n          \u003Cdiv class=\"p-s\">\n            \u003Cstrong class=\"mb-s block text-semibold\">\n              Title\n            \u003C\u002Fstrong>\n            \u003Cp>Detailed description goes here\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Ftemplate>\n      \u003C\u002FTooltip>\n    \u003C\u002Fdiv>\n  \u003C\u002FGrid>\n\u003C\u002Ftemplate>\n","vue","",[46,70,71,91,136,146,153,163,200,211,234,241,251,260,281,296,315,325,334,344,349,358,377,383,392,413,434,452,465,484,494,503,508,528,546,559,577,586,595,600,620,638,651,669,678,687,692,712,730,743,761,770,779,788,797,802,811,830,836,845,866,884,897,915,924,933,942,947,956,975,981,990,1010,1028,1041,1059,1068,1077,1086,1091,1100,1119,1125,1134,1143,1166,1179,1197,1206,1215,1224,1229,1238,1257,1263,1272,1281,1299,1312,1332,1352,1358,1368,1386,1395,1404,1413,1422,1432],{"__ignoreMap":68},[72,73,76,80,84,88],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"sP76a","\u003C",[72,81,83],{"class":82},"sKpE2","script",[72,85,87],{"class":86},"sflEz"," setup",[72,89,90],{"class":78},">\n",[72,92,94,97,100,103,106,109,111,114,116,119,122,125,129,133],{"class":74,"line":93},2,[72,95,96],{"class":82},"import",[72,98,99],{"class":78}," {",[72,101,102],{"class":86}," Button",[72,104,105],{"class":78},",",[72,107,108],{"class":86}," Flex",[72,110,105],{"class":78},[72,112,113],{"class":86}," Grid",[72,115,105],{"class":78},[72,117,118],{"class":86}," Tooltip",[72,120,121],{"class":78}," }",[72,123,124],{"class":82}," from",[72,126,128],{"class":127},"sBR95"," '",[72,130,132],{"class":131},"sfmH-","@dolanske\u002Fvui",[72,134,135],{"class":127},"'\n",[72,137,139,142,144],{"class":74,"line":138},3,[72,140,141],{"class":78},"\u003C\u002F",[72,143,83],{"class":82},[72,145,90],{"class":78},[72,147,149],{"class":74,"line":148},4,[72,150,152],{"emptyLinePlaceholder":151},true,"\n",[72,154,156,158,161],{"class":74,"line":155},5,[72,157,79],{"class":78},[72,159,160],{"class":82},"template",[72,162,90],{"class":78},[72,164,166,169,172,175,178,181,184,186,189,191,193,196,198],{"class":74,"line":165},6,[72,167,168],{"class":78},"  \u003C",[72,170,171],{"class":82},"Grid",[72,173,174],{"class":86}," gap",[72,176,177],{"class":78},"=",[72,179,180],{"class":127},"\"",[72,182,183],{"class":131},"l",[72,185,180],{"class":127},[72,187,188],{"class":86}," :columns",[72,190,177],{"class":78},[72,192,180],{"class":127},[72,194,195],{"class":131},"2",[72,197,180],{"class":127},[72,199,90],{"class":78},[72,201,203,206,209],{"class":74,"line":202},7,[72,204,205],{"class":78},"    \u003C",[72,207,208],{"class":82},"div",[72,210,90],{"class":78},[72,212,214,217,220,223,225,227,230,232],{"class":74,"line":213},8,[72,215,216],{"class":78},"      \u003C",[72,218,219],{"class":82},"strong",[72,221,222],{"class":86}," class",[72,224,177],{"class":78},[72,226,180],{"class":127},[72,228,229],{"class":131},"text-m mb-s block text-semibold",[72,231,180],{"class":127},[72,233,90],{"class":78},[72,235,237],{"class":74,"line":236},9,[72,238,240],{"class":239},"sX1ls","        Basic Usage\n",[72,242,244,247,249],{"class":74,"line":243},10,[72,245,246],{"class":78},"      \u003C\u002F",[72,248,219],{"class":82},[72,250,90],{"class":78},[72,252,254,256,258],{"class":74,"line":253},11,[72,255,216],{"class":78},[72,257,12],{"class":82},[72,259,90],{"class":78},[72,261,263,266,269,272,275,277,279],{"class":74,"line":262},12,[72,264,265],{"class":78},"        \u003C",[72,267,268],{"class":82},"Button",[72,270,271],{"class":78},">",[72,273,274],{"class":239},"Hover me",[72,276,141],{"class":78},[72,278,268],{"class":82},[72,280,90],{"class":78},[72,282,284,286,288,291,294],{"class":74,"line":283},13,[72,285,265],{"class":78},[72,287,160],{"class":82},[72,289,290],{"class":78}," #",[72,292,19],{"class":293},"sRTv0",[72,295,90],{"class":78},[72,297,299,302,304,306,309,311,313],{"class":74,"line":298},14,[72,300,301],{"class":78},"          \u003C",[72,303,21],{"class":82},[72,305,271],{"class":78},[72,307,308],{"class":239},"This is a tooltip",[72,310,141],{"class":78},[72,312,21],{"class":82},[72,314,90],{"class":78},[72,316,318,321,323],{"class":74,"line":317},15,[72,319,320],{"class":78},"        \u003C\u002F",[72,322,160],{"class":82},[72,324,90],{"class":78},[72,326,328,330,332],{"class":74,"line":327},16,[72,329,246],{"class":78},[72,331,12],{"class":82},[72,333,90],{"class":78},[72,335,337,340,342],{"class":74,"line":336},17,[72,338,339],{"class":78},"    \u003C\u002F",[72,341,208],{"class":82},[72,343,90],{"class":78},[72,345,347],{"class":74,"line":346},18,[72,348,152],{"emptyLinePlaceholder":151},[72,350,352,354,356],{"class":74,"line":351},19,[72,353,205],{"class":78},[72,355,208],{"class":82},[72,357,90],{"class":78},[72,359,361,363,365,367,369,371,373,375],{"class":74,"line":360},20,[72,362,216],{"class":78},[72,364,219],{"class":82},[72,366,222],{"class":86},[72,368,177],{"class":78},[72,370,180],{"class":127},[72,372,229],{"class":131},[72,374,180],{"class":127},[72,376,90],{"class":78},[72,378,380],{"class":74,"line":379},21,[72,381,382],{"class":239},"        Different Placements\n",[72,384,386,388,390],{"class":74,"line":385},22,[72,387,246],{"class":78},[72,389,219],{"class":82},[72,391,90],{"class":78},[72,393,395,397,400,402,404,406,409,411],{"class":74,"line":394},23,[72,396,216],{"class":78},[72,398,399],{"class":82},"Flex",[72,401,174],{"class":86},[72,403,177],{"class":78},[72,405,180],{"class":127},[72,407,408],{"class":131},"m",[72,410,180],{"class":127},[72,412,90],{"class":78},[72,414,416,418,420,423,425,427,430,432],{"class":74,"line":415},24,[72,417,265],{"class":78},[72,419,12],{"class":82},[72,421,422],{"class":86}," placement",[72,424,177],{"class":78},[72,426,180],{"class":127},[72,428,429],{"class":131},"top",[72,431,180],{"class":127},[72,433,90],{"class":78},[72,435,437,439,441,443,446,448,450],{"class":74,"line":436},25,[72,438,301],{"class":78},[72,440,268],{"class":82},[72,442,271],{"class":78},[72,444,445],{"class":239},"Top",[72,447,141],{"class":78},[72,449,268],{"class":82},[72,451,90],{"class":78},[72,453,455,457,459,461,463],{"class":74,"line":454},26,[72,456,301],{"class":78},[72,458,160],{"class":82},[72,460,290],{"class":78},[72,462,19],{"class":293},[72,464,90],{"class":78},[72,466,468,471,473,475,478,480,482],{"class":74,"line":467},27,[72,469,470],{"class":78},"            \u003C",[72,472,21],{"class":82},[72,474,271],{"class":78},[72,476,477],{"class":239},"Top tooltip",[72,479,141],{"class":78},[72,481,21],{"class":82},[72,483,90],{"class":78},[72,485,487,490,492],{"class":74,"line":486},28,[72,488,489],{"class":78},"          \u003C\u002F",[72,491,160],{"class":82},[72,493,90],{"class":78},[72,495,497,499,501],{"class":74,"line":496},29,[72,498,320],{"class":78},[72,500,12],{"class":82},[72,502,90],{"class":78},[72,504,506],{"class":74,"line":505},30,[72,507,152],{"emptyLinePlaceholder":151},[72,509,511,513,515,517,519,521,524,526],{"class":74,"line":510},31,[72,512,265],{"class":78},[72,514,12],{"class":82},[72,516,422],{"class":86},[72,518,177],{"class":78},[72,520,180],{"class":127},[72,522,523],{"class":131},"right",[72,525,180],{"class":127},[72,527,90],{"class":78},[72,529,531,533,535,537,540,542,544],{"class":74,"line":530},32,[72,532,301],{"class":78},[72,534,268],{"class":82},[72,536,271],{"class":78},[72,538,539],{"class":239},"Right",[72,541,141],{"class":78},[72,543,268],{"class":82},[72,545,90],{"class":78},[72,547,549,551,553,555,557],{"class":74,"line":548},33,[72,550,301],{"class":78},[72,552,160],{"class":82},[72,554,290],{"class":78},[72,556,19],{"class":293},[72,558,90],{"class":78},[72,560,562,564,566,568,571,573,575],{"class":74,"line":561},34,[72,563,470],{"class":78},[72,565,21],{"class":82},[72,567,271],{"class":78},[72,569,570],{"class":239},"Right tooltip",[72,572,141],{"class":78},[72,574,21],{"class":82},[72,576,90],{"class":78},[72,578,580,582,584],{"class":74,"line":579},35,[72,581,489],{"class":78},[72,583,160],{"class":82},[72,585,90],{"class":78},[72,587,589,591,593],{"class":74,"line":588},36,[72,590,320],{"class":78},[72,592,12],{"class":82},[72,594,90],{"class":78},[72,596,598],{"class":74,"line":597},37,[72,599,152],{"emptyLinePlaceholder":151},[72,601,603,605,607,609,611,613,616,618],{"class":74,"line":602},38,[72,604,265],{"class":78},[72,606,12],{"class":82},[72,608,422],{"class":86},[72,610,177],{"class":78},[72,612,180],{"class":127},[72,614,615],{"class":131},"bottom",[72,617,180],{"class":127},[72,619,90],{"class":78},[72,621,623,625,627,629,632,634,636],{"class":74,"line":622},39,[72,624,301],{"class":78},[72,626,268],{"class":82},[72,628,271],{"class":78},[72,630,631],{"class":239},"Bottom",[72,633,141],{"class":78},[72,635,268],{"class":82},[72,637,90],{"class":78},[72,639,641,643,645,647,649],{"class":74,"line":640},40,[72,642,301],{"class":78},[72,644,160],{"class":82},[72,646,290],{"class":78},[72,648,19],{"class":293},[72,650,90],{"class":78},[72,652,654,656,658,660,663,665,667],{"class":74,"line":653},41,[72,655,470],{"class":78},[72,657,21],{"class":82},[72,659,271],{"class":78},[72,661,662],{"class":239},"Bottom tooltip",[72,664,141],{"class":78},[72,666,21],{"class":82},[72,668,90],{"class":78},[72,670,672,674,676],{"class":74,"line":671},42,[72,673,489],{"class":78},[72,675,160],{"class":82},[72,677,90],{"class":78},[72,679,681,683,685],{"class":74,"line":680},43,[72,682,320],{"class":78},[72,684,12],{"class":82},[72,686,90],{"class":78},[72,688,690],{"class":74,"line":689},44,[72,691,152],{"emptyLinePlaceholder":151},[72,693,695,697,699,701,703,705,708,710],{"class":74,"line":694},45,[72,696,265],{"class":78},[72,698,12],{"class":82},[72,700,422],{"class":86},[72,702,177],{"class":78},[72,704,180],{"class":127},[72,706,707],{"class":131},"left",[72,709,180],{"class":127},[72,711,90],{"class":78},[72,713,715,717,719,721,724,726,728],{"class":74,"line":714},46,[72,716,301],{"class":78},[72,718,268],{"class":82},[72,720,271],{"class":78},[72,722,723],{"class":239},"Left",[72,725,141],{"class":78},[72,727,268],{"class":82},[72,729,90],{"class":78},[72,731,733,735,737,739,741],{"class":74,"line":732},47,[72,734,301],{"class":78},[72,736,160],{"class":82},[72,738,290],{"class":78},[72,740,19],{"class":293},[72,742,90],{"class":78},[72,744,746,748,750,752,755,757,759],{"class":74,"line":745},48,[72,747,470],{"class":78},[72,749,21],{"class":82},[72,751,271],{"class":78},[72,753,754],{"class":239},"Left tooltip",[72,756,141],{"class":78},[72,758,21],{"class":82},[72,760,90],{"class":78},[72,762,764,766,768],{"class":74,"line":763},49,[72,765,489],{"class":78},[72,767,160],{"class":82},[72,769,90],{"class":78},[72,771,773,775,777],{"class":74,"line":772},50,[72,774,320],{"class":78},[72,776,12],{"class":82},[72,778,90],{"class":78},[72,780,782,784,786],{"class":74,"line":781},51,[72,783,246],{"class":78},[72,785,399],{"class":82},[72,787,90],{"class":78},[72,789,791,793,795],{"class":74,"line":790},52,[72,792,339],{"class":78},[72,794,208],{"class":82},[72,796,90],{"class":78},[72,798,800],{"class":74,"line":799},53,[72,801,152],{"emptyLinePlaceholder":151},[72,803,805,807,809],{"class":74,"line":804},54,[72,806,205],{"class":78},[72,808,208],{"class":82},[72,810,90],{"class":78},[72,812,814,816,818,820,822,824,826,828],{"class":74,"line":813},55,[72,815,216],{"class":78},[72,817,219],{"class":82},[72,819,222],{"class":86},[72,821,177],{"class":78},[72,823,180],{"class":127},[72,825,229],{"class":131},[72,827,180],{"class":127},[72,829,90],{"class":78},[72,831,833],{"class":74,"line":832},56,[72,834,835],{"class":239},"        With Enter Delay\n",[72,837,839,841,843],{"class":74,"line":838},57,[72,840,246],{"class":78},[72,842,219],{"class":82},[72,844,90],{"class":78},[72,846,848,850,852,855,857,859,862,864],{"class":74,"line":847},58,[72,849,216],{"class":78},[72,851,12],{"class":82},[72,853,854],{"class":86}," enter-delay",[72,856,177],{"class":78},[72,858,180],{"class":127},[72,860,861],{"class":131},"500",[72,863,180],{"class":127},[72,865,90],{"class":78},[72,867,869,871,873,875,878,880,882],{"class":74,"line":868},59,[72,870,265],{"class":78},[72,872,268],{"class":82},[72,874,271],{"class":78},[72,876,877],{"class":239},"Hover me (500ms delay)",[72,879,141],{"class":78},[72,881,268],{"class":82},[72,883,90],{"class":78},[72,885,887,889,891,893,895],{"class":74,"line":886},60,[72,888,265],{"class":78},[72,890,160],{"class":82},[72,892,290],{"class":78},[72,894,19],{"class":293},[72,896,90],{"class":78},[72,898,900,902,904,906,909,911,913],{"class":74,"line":899},61,[72,901,301],{"class":78},[72,903,21],{"class":82},[72,905,271],{"class":78},[72,907,908],{"class":239},"This tooltip appears after 500ms",[72,910,141],{"class":78},[72,912,21],{"class":82},[72,914,90],{"class":78},[72,916,918,920,922],{"class":74,"line":917},62,[72,919,320],{"class":78},[72,921,160],{"class":82},[72,923,90],{"class":78},[72,925,927,929,931],{"class":74,"line":926},63,[72,928,246],{"class":78},[72,930,12],{"class":82},[72,932,90],{"class":78},[72,934,936,938,940],{"class":74,"line":935},64,[72,937,339],{"class":78},[72,939,208],{"class":82},[72,941,90],{"class":78},[72,943,945],{"class":74,"line":944},65,[72,946,152],{"emptyLinePlaceholder":151},[72,948,950,952,954],{"class":74,"line":949},66,[72,951,205],{"class":78},[72,953,208],{"class":82},[72,955,90],{"class":78},[72,957,959,961,963,965,967,969,971,973],{"class":74,"line":958},67,[72,960,216],{"class":78},[72,962,219],{"class":82},[72,964,222],{"class":86},[72,966,177],{"class":78},[72,968,180],{"class":127},[72,970,229],{"class":131},[72,972,180],{"class":127},[72,974,90],{"class":78},[72,976,978],{"class":74,"line":977},68,[72,979,980],{"class":239},"        With Leave Delay\n",[72,982,984,986,988],{"class":74,"line":983},69,[72,985,246],{"class":78},[72,987,219],{"class":82},[72,989,90],{"class":78},[72,991,993,995,997,1000,1002,1004,1006,1008],{"class":74,"line":992},70,[72,994,216],{"class":78},[72,996,12],{"class":82},[72,998,999],{"class":86}," leave-delay",[72,1001,177],{"class":78},[72,1003,180],{"class":127},[72,1005,861],{"class":131},[72,1007,180],{"class":127},[72,1009,90],{"class":78},[72,1011,1013,1015,1017,1019,1022,1024,1026],{"class":74,"line":1012},71,[72,1014,265],{"class":78},[72,1016,268],{"class":82},[72,1018,271],{"class":78},[72,1020,1021],{"class":239},"Hover me (closes after 500ms)",[72,1023,141],{"class":78},[72,1025,268],{"class":82},[72,1027,90],{"class":78},[72,1029,1031,1033,1035,1037,1039],{"class":74,"line":1030},72,[72,1032,265],{"class":78},[72,1034,160],{"class":82},[72,1036,290],{"class":78},[72,1038,19],{"class":293},[72,1040,90],{"class":78},[72,1042,1044,1046,1048,1050,1053,1055,1057],{"class":74,"line":1043},73,[72,1045,301],{"class":78},[72,1047,21],{"class":82},[72,1049,271],{"class":78},[72,1051,1052],{"class":239},"This tooltip stays for 500ms after you stop hovering",[72,1054,141],{"class":78},[72,1056,21],{"class":82},[72,1058,90],{"class":78},[72,1060,1062,1064,1066],{"class":74,"line":1061},74,[72,1063,320],{"class":78},[72,1065,160],{"class":82},[72,1067,90],{"class":78},[72,1069,1071,1073,1075],{"class":74,"line":1070},75,[72,1072,246],{"class":78},[72,1074,12],{"class":82},[72,1076,90],{"class":78},[72,1078,1080,1082,1084],{"class":74,"line":1079},76,[72,1081,339],{"class":78},[72,1083,208],{"class":82},[72,1085,90],{"class":78},[72,1087,1089],{"class":74,"line":1088},77,[72,1090,152],{"emptyLinePlaceholder":151},[72,1092,1094,1096,1098],{"class":74,"line":1093},78,[72,1095,205],{"class":78},[72,1097,208],{"class":82},[72,1099,90],{"class":78},[72,1101,1103,1105,1107,1109,1111,1113,1115,1117],{"class":74,"line":1102},79,[72,1104,216],{"class":78},[72,1106,219],{"class":82},[72,1108,222],{"class":86},[72,1110,177],{"class":78},[72,1112,180],{"class":127},[72,1114,229],{"class":131},[72,1116,180],{"class":127},[72,1118,90],{"class":78},[72,1120,1122],{"class":74,"line":1121},80,[72,1123,1124],{"class":239},"        With Icon\n",[72,1126,1128,1130,1132],{"class":74,"line":1127},81,[72,1129,246],{"class":78},[72,1131,219],{"class":82},[72,1133,90],{"class":78},[72,1135,1137,1139,1141],{"class":74,"line":1136},82,[72,1138,216],{"class":78},[72,1140,12],{"class":82},[72,1142,90],{"class":78},[72,1144,1146,1148,1151,1154,1156,1158,1161,1163],{"class":74,"line":1145},83,[72,1147,265],{"class":78},[72,1149,1150],{"class":82},"IconInfo",[72,1152,1153],{"class":86}," :size",[72,1155,177],{"class":78},[72,1157,180],{"class":127},[72,1159,1160],{"class":131},"24",[72,1162,180],{"class":127},[72,1164,1165],{"class":78}," \u002F>\n",[72,1167,1169,1171,1173,1175,1177],{"class":74,"line":1168},84,[72,1170,265],{"class":78},[72,1172,160],{"class":82},[72,1174,290],{"class":78},[72,1176,19],{"class":293},[72,1178,90],{"class":78},[72,1180,1182,1184,1186,1188,1191,1193,1195],{"class":74,"line":1181},85,[72,1183,301],{"class":78},[72,1185,21],{"class":82},[72,1187,271],{"class":78},[72,1189,1190],{"class":239},"Additional information",[72,1192,141],{"class":78},[72,1194,21],{"class":82},[72,1196,90],{"class":78},[72,1198,1200,1202,1204],{"class":74,"line":1199},86,[72,1201,320],{"class":78},[72,1203,160],{"class":82},[72,1205,90],{"class":78},[72,1207,1209,1211,1213],{"class":74,"line":1208},87,[72,1210,246],{"class":78},[72,1212,12],{"class":82},[72,1214,90],{"class":78},[72,1216,1218,1220,1222],{"class":74,"line":1217},88,[72,1219,339],{"class":78},[72,1221,208],{"class":82},[72,1223,90],{"class":78},[72,1225,1227],{"class":74,"line":1226},89,[72,1228,152],{"emptyLinePlaceholder":151},[72,1230,1232,1234,1236],{"class":74,"line":1231},90,[72,1233,205],{"class":78},[72,1235,208],{"class":82},[72,1237,90],{"class":78},[72,1239,1241,1243,1245,1247,1249,1251,1253,1255],{"class":74,"line":1240},91,[72,1242,216],{"class":78},[72,1244,219],{"class":82},[72,1246,222],{"class":86},[72,1248,177],{"class":78},[72,1250,180],{"class":127},[72,1252,229],{"class":131},[72,1254,180],{"class":127},[72,1256,90],{"class":78},[72,1258,1260],{"class":74,"line":1259},92,[72,1261,1262],{"class":239},"        With Formatted Content\n",[72,1264,1266,1268,1270],{"class":74,"line":1265},93,[72,1267,246],{"class":78},[72,1269,219],{"class":82},[72,1271,90],{"class":78},[72,1273,1275,1277,1279],{"class":74,"line":1274},94,[72,1276,216],{"class":78},[72,1278,12],{"class":82},[72,1280,90],{"class":78},[72,1282,1284,1286,1288,1290,1293,1295,1297],{"class":74,"line":1283},95,[72,1285,265],{"class":78},[72,1287,268],{"class":82},[72,1289,271],{"class":78},[72,1291,1292],{"class":239},"Hover for details",[72,1294,141],{"class":78},[72,1296,268],{"class":82},[72,1298,90],{"class":78},[72,1300,1302,1304,1306,1308,1310],{"class":74,"line":1301},96,[72,1303,265],{"class":78},[72,1305,160],{"class":82},[72,1307,290],{"class":78},[72,1309,19],{"class":293},[72,1311,90],{"class":78},[72,1313,1315,1317,1319,1321,1323,1325,1328,1330],{"class":74,"line":1314},97,[72,1316,301],{"class":78},[72,1318,208],{"class":82},[72,1320,222],{"class":86},[72,1322,177],{"class":78},[72,1324,180],{"class":127},[72,1326,1327],{"class":131},"p-s",[72,1329,180],{"class":127},[72,1331,90],{"class":78},[72,1333,1335,1337,1339,1341,1343,1345,1348,1350],{"class":74,"line":1334},98,[72,1336,470],{"class":78},[72,1338,219],{"class":82},[72,1340,222],{"class":86},[72,1342,177],{"class":78},[72,1344,180],{"class":127},[72,1346,1347],{"class":131},"mb-s block text-semibold",[72,1349,180],{"class":127},[72,1351,90],{"class":78},[72,1353,1355],{"class":74,"line":1354},99,[72,1356,1357],{"class":239},"              Title\n",[72,1359,1361,1364,1366],{"class":74,"line":1360},100,[72,1362,1363],{"class":78},"            \u003C\u002F",[72,1365,219],{"class":82},[72,1367,90],{"class":78},[72,1369,1371,1373,1375,1377,1380,1382,1384],{"class":74,"line":1370},101,[72,1372,470],{"class":78},[72,1374,21],{"class":82},[72,1376,271],{"class":78},[72,1378,1379],{"class":239},"Detailed description goes here",[72,1381,141],{"class":78},[72,1383,21],{"class":82},[72,1385,90],{"class":78},[72,1387,1389,1391,1393],{"class":74,"line":1388},102,[72,1390,489],{"class":78},[72,1392,208],{"class":82},[72,1394,90],{"class":78},[72,1396,1398,1400,1402],{"class":74,"line":1397},103,[72,1399,320],{"class":78},[72,1401,160],{"class":82},[72,1403,90],{"class":78},[72,1405,1407,1409,1411],{"class":74,"line":1406},104,[72,1408,246],{"class":78},[72,1410,12],{"class":82},[72,1412,90],{"class":78},[72,1414,1416,1418,1420],{"class":74,"line":1415},105,[72,1417,339],{"class":78},[72,1419,208],{"class":82},[72,1421,90],{"class":78},[72,1423,1425,1428,1430],{"class":74,"line":1424},106,[72,1426,1427],{"class":78},"  \u003C\u002F",[72,1429,171],{"class":82},[72,1431,90],{"class":78},[72,1433,1435,1437,1439],{"class":74,"line":1434},107,[72,1436,141],{"class":78},[72,1438,160],{"class":82},[72,1440,90],{"class":78},[1442,1443,1445],"h3",{"id":1444},"props","Props",[1447,1448,1449,1465],"table",{},[1450,1451,1452],"thead",{},[1453,1454,1455,1459,1462],"tr",{},[1456,1457,1458],"th",{},"Name",[1456,1460,1461],{},"Default",[1456,1463,1464],{},"Type",[1466,1467,1468,1519,1539,1557],"tbody",{},[1453,1469,1470,1476,1480],{},[1471,1472,1473],"td",{},[46,1474,1475],{},"placement",[1471,1477,1478],{},[46,1479,429],{},[1471,1481,1482,1484,1485,1484,1487,1484,1489,1484,1491,1484,1494,1484,1497,1484,1500,1484,1503,1484,1506,1484,1509,1484,1512,1484,1515,1518],{},[46,1483,429],{}," ",[46,1486,523],{},[46,1488,615],{},[46,1490,707],{},[46,1492,1493],{},"top-start",[46,1495,1496],{},"top-end",[46,1498,1499],{},"right-start",[46,1501,1502],{},"right-end",[46,1504,1505],{},"bottom-start",[46,1507,1508],{},"bottom-end",[46,1510,1511],{},"left-start",[46,1513,1514],{},"left-end",[1516,1517],"br",{}," Position of the dropdown relative to the trigger",[1453,1520,1521,1526,1531],{},[1471,1522,1523],{},[46,1524,1525],{},"enter-delay",[1471,1527,1528],{},[46,1529,1530],{},"0",[1471,1532,1533,1484,1536,1538],{},[46,1534,1535],{},"number",[1516,1537],{}," The delay in milliseconds before showing the tooltip",[1453,1540,1541,1546,1550],{},[1471,1542,1543],{},[46,1544,1545],{},"leave-delay",[1471,1547,1548],{},[46,1549,1530],{},[1471,1551,1552,1484,1554,1556],{},[46,1553,1535],{},[1516,1555],{}," The delay in milliseconds before hiding the tooltip after the cursor leaves",[1453,1558,1559,1564,1569],{},[1471,1560,1561],{},[46,1562,1563],{},"disabled",[1471,1565,1566],{},[46,1567,1568],{},"false",[1471,1570,1571,1484,1574,1576],{},[46,1572,1573],{},"boolean",[1516,1575],{}," Controls whether the tooltip can render",[1442,1578,1580],{"id":1579},"slots","Slots",[1447,1582,1583,1595],{},[1450,1584,1585],{},[1453,1586,1587,1589,1592],{},[1456,1588,1458],{},[1456,1590,1591],{},"Accepts",[1456,1593,1594],{},"Description",[1466,1596,1597,1612],{},[1453,1598,1599,1604,1609],{},[1471,1600,1601],{},[46,1602,1603],{},"default",[1471,1605,1606],{},[46,1607,1608],{},"any",[1471,1610,1611],{},"The element that triggers the tooltip",[1453,1613,1614,1618,1622],{},[1471,1615,1616],{},[46,1617,19],{},[1471,1619,1620],{},[46,1621,1608],{},[1471,1623,1624],{},"The content of the tooltip",[1442,1626,1628],{"id":1627},"tokens","Tokens",[21,1630,1631],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[1447,1633,1634,1645],{},[1450,1635,1636],{},[1453,1637,1638,1641,1643],{},[1456,1639,1640],{},"Token",[1456,1642,1461],{},[1456,1644,1594],{},[1466,1646,1647,1665,1682,1697,1715,1733],{},[1453,1648,1649,1654,1662],{},[1471,1650,1651],{},[46,1652,1653],{},"--vui-tooltip-padding-block",[1471,1655,1656],{},[31,1657,1659],{"href":1658},"\u002Fdocs\u002Ftokens\u002Fspacing",[46,1660,1661],{},"var(--space-xs)",[1471,1663,1664],{},"Vertical padding",[1453,1666,1667,1672,1679],{},[1471,1668,1669],{},[46,1670,1671],{},"--vui-tooltip-padding-inline",[1471,1673,1674],{},[31,1675,1676],{"href":1658},[46,1677,1678],{},"var(--space-s)",[1471,1680,1681],{},"Horizontal padding",[1453,1683,1684,1689,1694],{},[1471,1685,1686],{},[46,1687,1688],{},"--vui-tooltip-max-width",[1471,1690,1691],{},[46,1692,1693],{},"512px",[1471,1695,1696],{},"Max tooltip width",[1453,1698,1699,1704,1712],{},[1471,1700,1701],{},[46,1702,1703],{},"--vui-tooltip-background-color",[1471,1705,1706],{},[31,1707,1709],{"href":1708},"\u002Fdocs\u002Ftokens\u002Fcolors",[46,1710,1711],{},"var(--color-bg-raised)",[1471,1713,1714],{},"Background color",[1453,1716,1717,1722,1730],{},[1471,1718,1719],{},[46,1720,1721],{},"--vui-tooltip-font-size",[1471,1723,1724],{},[31,1725,1727],{"href":1726},"\u002Fdocs\u002Ftokens\u002Ftext",[46,1728,1729],{},"var(--font-size-m)",[1471,1731,1732],{},"Font size",[1453,1734,1735,1740,1747],{},[1471,1736,1737],{},[46,1738,1739],{},"--vui-tooltip-color",[1471,1741,1742],{},[31,1743,1744],{"href":1708},[46,1745,1746],{},"var(--color-text)",[1471,1748,1749],{},"Text color",[1751,1752,1753],"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 .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}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":68,"searchDepth":93,"depth":93,"links":1755},[1756,1757,1758],{"id":1444,"depth":138,"text":1445},{"id":1579,"depth":138,"text":1580},{"id":1627,"depth":138,"text":1628},"md",{},{"title":12,"description":23},"docs\u002Fcomponents\u002Ftooltip","K3nGXZQ0klUXl-x0PI4DwR5Zj8wCou7fwR4uUhC-4fg",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1765},"\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>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1767},"\u003Cpath fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 8 8m-32-92a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"\u002F>",1782200883520]