[{"data":1,"prerenderedAt":2582},["ShallowReactive",2],{"content-\u002Fen\u002Fcomponents\u002Ftooltip":3,"content-en-fallback-\u002Fen\u002Fcomponents\u002Ftooltip":1398},{"id":4,"title":5,"body":6,"description":1390,"extension":1391,"meta":1392,"nav":1393,"navigation":530,"path":1394,"seo":1395,"stem":1396,"__hash__":1397},"content_en\u002Fen\u002Fcomponents\u002Ftooltip.md","Tooltip",{"type":7,"value":8,"toc":1380},"minimark",[9,13,22,38,109,114,125,189,193,213,346,350,369,451,460,464,484,614,659,663,676,726,730,930,967,1009,1015,1075,1376],[10,11,5],"h1",{"id":12},"tooltip",[14,15,16,17,21],"p",{},"ToolTip provides extra explanation of \"what this element does\" or \"what the user should do\": it appears when the pointer hovers over the target element, or when the target element receives keyboard focus (WinUI official description: ",[18,19,20],"em",{},"A ToolTip shows more information about a UI element… The ToolTip is shown when a user hovers over or presses and holds the UI element.",").",[14,23,24,25,29,30,33,34,37],{},"The styling, geometry and motion align with the WinUI 3 \u002F Windows App SDK ToolTip (",[26,27,28],"code",{},"microsoft-ui-xaml"," ",[26,31,32],{},"winui3\u002Frelease\u002F2.5.1","; ",[26,35,36],{},"ToolTip_themeresources.xaml"," byte-for-byte identical to the WindowsAppSDK 2.0.1 used by the latest WinUI3 Gallery release v2.9.3):",[39,40,41,68,86,99],"ul",{},[42,43,44,48,49,52,53,56,57,60,61,64,65,21],"li",{},[45,46,47],"strong",{},"Geometry",": padding ",[26,50,51],{},"9,6,9,8"," (",[26,54,55],{},"ToolTipBorderPadding","), max width 320 (",[26,58,59],{},"ToolTipMaxWidth","), corner radius 4 (",[26,62,63],{},"ControlCornerRadius","), 1px border (",[26,66,67],{},"ToolTipBorderThemeThickness",[42,69,70,73,74,77,78,81,82,85],{},[45,71,72],{},"Colors",": background ",[26,75,76],{},"AcrylicInAppFillColorDefaultBrush"," (in-app Acrylic), foreground ",[26,79,80],{},"TextFillColorPrimary",", border ",[26,83,84],{},"SurfaceStrokeColorFlyout",".",[42,87,88,91,92,95,96,85],{},[45,89,90],{},"Typography",": font size 12 (",[26,93,94],{},"ToolTipContentThemeFontSize","), line height 16, ",[26,97,98],{},"TextWrapping=Wrap",[42,100,101,104,105,108],{},[45,102,103],{},"No arrow",": the WinUI ToolTip template has only a single ",[26,106,107],{},"ContentPresenter",", with no Pointer \u002F arrowhead, so this component does not render an arrow either.",[110,111,113],"h2",{"id":112},"basic-usage","Basic usage",[14,115,116,117,120,121,124],{},"Wrap any element; ",[26,118,119],{},"content"," corresponds to the WinUI ",[26,122,123],{},"ToolTipService.ToolTip=\"text\""," usage.",[126,127,129,136],"demo-block",{"title":128},"Simple ToolTip (aligned with the Gallery example)",[130,131,133],"template",{"v-slot:preview":132},"",[134,135],"tooltip-basic-demo",{},[130,137,138],{"v-slot:code":132},[139,140,144],"pre",{"className":141,"code":142,"language":143,"meta":132,"style":132},"language-vue shiki shiki-themes github-light github-dark","\u003CFluereTooltip content=\"Simple ToolTip\">\n  \u003CFluereButton>Button with a simple ToolTip.\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n","vue",[26,145,146,173,179],{"__ignoreMap":132},[147,148,151,155,159,163,166,170],"span",{"class":149,"line":150},"line",1,[147,152,154],{"class":153},"sVt8B","\u003C",[147,156,158],{"class":157},"s9eBZ","FluereTooltip",[147,160,162],{"class":161},"sScJk"," content",[147,164,165],{"class":153},"=",[147,167,169],{"class":168},"sZZnC","\"Simple ToolTip\"",[147,171,172],{"class":153},">\n",[147,174,176],{"class":149,"line":175},2,[147,177,178],{"class":153},"  \u003CFluereButton>Button with a simple ToolTip.\u003C\u002FFluereButton>\n",[147,180,182,185,187],{"class":149,"line":181},3,[147,183,184],{"class":153},"\u003C\u002F",[147,186,158],{"class":157},[147,188,172],{"class":153},[110,190,192],{"id":191},"placement","Placement",[14,194,195,197,198,201,202,205,206,209,210,21],{},[26,196,191],{}," corresponds to WinUI's ",[26,199,200],{},"ToolTip.Placement",", defaulting to ",[26,203,204],{},"top"," (i.e. the ",[26,207,208],{},"DefaultPlacementMode"," of an automatic WinUI ToolTip). When there is insufficient space, the component automatically flips to the opposite placement and pushes the tip back into the viewport (aligned with the \"preferred placement → opposite side → edge-snapped push-back\" in ",[26,211,212],{},"ToolTipPositioning::QueryRelativePosition",[126,214,216,221],{"title":215},"Four placements",[130,217,218],{"v-slot:preview":132},[219,220],"tooltip-placement-demo",{},[130,222,223],{"v-slot:code":132},[139,224,226],{"className":141,"code":225,"language":143,"meta":132,"style":132},"\u003CFluereTooltip content=\"Placement = Top (default)\" placement=\"top\">\n  \u003CFluereButton>Top\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n\u003CFluereTooltip content=\"Placement = Bottom\" placement=\"bottom\">…\u003C\u002FFluereTooltip>\n\u003CFluereTooltip content=\"Placement = Left\" placement=\"left\">…\u003C\u002FFluereTooltip>\n\u003CFluereTooltip content=\"Placement = Right\" placement=\"right\">…\u003C\u002FFluereTooltip>\n",[26,227,228,251,256,264,292,319],{"__ignoreMap":132},[147,229,230,232,234,236,238,241,244,246,249],{"class":149,"line":150},[147,231,154],{"class":153},[147,233,158],{"class":157},[147,235,162],{"class":161},[147,237,165],{"class":153},[147,239,240],{"class":168},"\"Placement = Top (default)\"",[147,242,243],{"class":161}," placement",[147,245,165],{"class":153},[147,247,248],{"class":168},"\"top\"",[147,250,172],{"class":153},[147,252,253],{"class":149,"line":175},[147,254,255],{"class":153},"  \u003CFluereButton>Top\u003C\u002FFluereButton>\n",[147,257,258,260,262],{"class":149,"line":181},[147,259,184],{"class":153},[147,261,158],{"class":157},[147,263,172],{"class":153},[147,265,267,269,271,273,275,278,280,282,285,288,290],{"class":149,"line":266},4,[147,268,154],{"class":153},[147,270,158],{"class":157},[147,272,162],{"class":161},[147,274,165],{"class":153},[147,276,277],{"class":168},"\"Placement = Bottom\"",[147,279,243],{"class":161},[147,281,165],{"class":153},[147,283,284],{"class":168},"\"bottom\"",[147,286,287],{"class":153},">…\u003C\u002F",[147,289,158],{"class":157},[147,291,172],{"class":153},[147,293,295,297,299,301,303,306,308,310,313,315,317],{"class":149,"line":294},5,[147,296,154],{"class":153},[147,298,158],{"class":157},[147,300,162],{"class":161},[147,302,165],{"class":153},[147,304,305],{"class":168},"\"Placement = Left\"",[147,307,243],{"class":161},[147,309,165],{"class":153},[147,311,312],{"class":168},"\"left\"",[147,314,287],{"class":153},[147,316,158],{"class":157},[147,318,172],{"class":153},[147,320,322,324,326,328,330,333,335,337,340,342,344],{"class":149,"line":321},6,[147,323,154],{"class":153},[147,325,158],{"class":157},[147,327,162],{"class":161},[147,329,165],{"class":153},[147,331,332],{"class":168},"\"Placement = Right\"",[147,334,243],{"class":161},[147,336,165],{"class":153},[147,338,339],{"class":168},"\"right\"",[147,341,287],{"class":153},[147,343,158],{"class":157},[147,345,172],{"class":153},[110,347,349],{"id":348},"show-delay-and-re-show","Show delay and \"re-show\"",[14,351,352,353,356,357,360,361,364,365,368],{},"WinUI delegates the delay to the process-level ",[26,354,355],{},"ToolTipService",": first show = ",[26,358,359],{},"SPI_GETMOUSEHOVERTIME","(400ms) × 2 (mouse \u002F keyboard) or × 1 (touch); when less than ",[26,362,363],{},"BETWEEN_SHOW_DELAY_MS","(200ms) has elapsed since the last opening, it takes the \"re-show\" path instead (mouse 1.5×, touch 0). ",[26,366,367],{},"FluereTooltipProvider"," is this service layer: wrap a group of ToolTips and they share the same re-show window.",[126,370,372,377],{"title":371},"Provider (aligned with ToolTipService) and per-instance delay",[130,373,374],{"v-slot:preview":132},[375,376],"tooltip-delay-demo",{},[130,378,379],{"v-slot:code":132},[139,380,382],{"className":141,"code":381,"language":143,"meta":132,"style":132},"\u003CFluereTooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"200\">\n  \u003CFluereTooltip content=\"Simple ToolTip\">\n    \u003CFluereButton>Default 400ms\u003C\u002FFluereButton>\n  \u003C\u002FFluereTooltip>\n  \u003CFluereTooltip content=\"Show immediately\" :delay-duration=\"0\">…\u003C\u002FFluereTooltip>\n\u003C\u002FFluereTooltipProvider>\n",[26,383,384,423,428,433,438,443],{"__ignoreMap":132},[147,385,386,388,390,393,396,398,401,405,407,409,412,414,416,419,421],{"class":149,"line":150},[147,387,154],{"class":153},[147,389,367],{"class":157},[147,391,392],{"class":153}," :",[147,394,395],{"class":161},"delay-duration",[147,397,165],{"class":153},[147,399,400],{"class":168},"\"",[147,402,404],{"class":403},"sj4cs","400",[147,406,400],{"class":168},[147,408,392],{"class":153},[147,410,411],{"class":161},"skip-delay-duration",[147,413,165],{"class":153},[147,415,400],{"class":168},[147,417,418],{"class":403},"200",[147,420,400],{"class":168},[147,422,172],{"class":153},[147,424,425],{"class":149,"line":175},[147,426,427],{"class":153},"  \u003CFluereTooltip content=\"Simple ToolTip\">\n",[147,429,430],{"class":149,"line":181},[147,431,432],{"class":153},"    \u003CFluereButton>Default 400ms\u003C\u002FFluereButton>\n",[147,434,435],{"class":149,"line":266},[147,436,437],{"class":153},"  \u003C\u002FFluereTooltip>\n",[147,439,440],{"class":149,"line":294},[147,441,442],{"class":153},"  \u003CFluereTooltip content=\"Show immediately\" :delay-duration=\"0\">…\u003C\u002FFluereTooltip>\n",[147,444,445,447,449],{"class":149,"line":321},[147,446,184],{"class":153},[147,448,367],{"class":157},[147,450,172],{"class":153},[452,453,454],"blockquote",{},[14,455,456,457,459],{},"You can also use it standalone without wrapping ",[26,458,367],{},": the component carries its own default Provider (400 \u002F 200), though you lose the \"multiple ToolTips share a re-show window\" feel.",[110,461,463],{"id":462},"content-forms-and-disabled","Content forms and disabled",[14,465,466,468,469,472,473,197,476,479,480,483],{},[26,467,119],{}," takes plain text; use the ",[26,470,471],{},"#content"," slot for rich content (icons, shortcuts, multi-paragraph text). ",[26,474,475],{},"disabled",[26,477,478],{},"ToolTip.IsEnabled = false"," (WinUI sets the Popup's ",[26,481,482],{},"Opacity"," to 0 in that branch; this library expresses it as not expanding).",[126,485,487,492],{"title":486},"Plain text \u002F long-text wrapping \u002F rich content \u002F disabled",[130,488,489],{"v-slot:preview":132},[490,491],"tooltip-content-demo",{},[130,493,494],{"v-slot:code":132},[139,495,497],{"className":141,"code":496,"language":143,"meta":132,"style":132},"\u003CFluereTooltip content=\"Simple ToolTip\">\n  \u003CFluereButton>Plain text (content)\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n\n\u003CFluereTooltip :content=\"longText\">\n  \u003CFluereButton>Long text wraps automatically\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n\n\u003CFluereTooltip>\n  \u003CFluereButton>Rich content (#content)\u003C\u002FFluereButton>\n  \u003Ctemplate #content>\n    \u003Cspan>\u003Cstrong>Save\u003C\u002Fstrong> Ctrl + S\u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereTooltip>\n",[26,498,499,513,518,526,532,553,558,567,572,581,587,593,599,605],{"__ignoreMap":132},[147,500,501,503,505,507,509,511],{"class":149,"line":150},[147,502,154],{"class":153},[147,504,158],{"class":157},[147,506,162],{"class":161},[147,508,165],{"class":153},[147,510,169],{"class":168},[147,512,172],{"class":153},[147,514,515],{"class":149,"line":175},[147,516,517],{"class":153},"  \u003CFluereButton>Plain text (content)\u003C\u002FFluereButton>\n",[147,519,520,522,524],{"class":149,"line":181},[147,521,184],{"class":153},[147,523,158],{"class":157},[147,525,172],{"class":153},[147,527,528],{"class":149,"line":266},[147,529,531],{"emptyLinePlaceholder":530},true,"\n",[147,533,534,536,538,540,542,544,546,549,551],{"class":149,"line":294},[147,535,154],{"class":153},[147,537,158],{"class":157},[147,539,392],{"class":153},[147,541,119],{"class":161},[147,543,165],{"class":153},[147,545,400],{"class":168},[147,547,548],{"class":153},"longText",[147,550,400],{"class":168},[147,552,172],{"class":153},[147,554,555],{"class":149,"line":321},[147,556,557],{"class":153},"  \u003CFluereButton>Long text wraps automatically\u003C\u002FFluereButton>\n",[147,559,561,563,565],{"class":149,"line":560},7,[147,562,184],{"class":153},[147,564,158],{"class":157},[147,566,172],{"class":153},[147,568,570],{"class":149,"line":569},8,[147,571,531],{"emptyLinePlaceholder":530},[147,573,575,577,579],{"class":149,"line":574},9,[147,576,154],{"class":153},[147,578,158],{"class":157},[147,580,172],{"class":153},[147,582,584],{"class":149,"line":583},10,[147,585,586],{"class":153},"  \u003CFluereButton>Rich content (#content)\u003C\u002FFluereButton>\n",[147,588,590],{"class":149,"line":589},11,[147,591,592],{"class":153},"  \u003Ctemplate #content>\n",[147,594,596],{"class":149,"line":595},12,[147,597,598],{"class":153},"    \u003Cspan>\u003Cstrong>Save\u003C\u002Fstrong> Ctrl + S\u003C\u002Fspan>\n",[147,600,602],{"class":149,"line":601},13,[147,603,604],{"class":153},"  \u003C\u002Ftemplate>\n",[147,606,608,610,612],{"class":149,"line":607},14,[147,609,184],{"class":153},[147,611,158],{"class":157},[147,613,172],{"class":153},[126,615,616,621],{"title":475},[130,617,618],{"v-slot:preview":132},[619,620],"tooltip-disabled-demo",{},[130,622,623],{"v-slot:code":132},[139,624,626],{"className":141,"code":625,"language":143,"meta":132,"style":132},"\u003CFluereTooltip content=\"This won't show\" disabled>\n  \u003CFluereButton>disabled\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n",[26,627,628,646,651],{"__ignoreMap":132},[147,629,630,632,634,636,638,641,644],{"class":149,"line":150},[147,631,154],{"class":153},[147,633,158],{"class":157},[147,635,162],{"class":161},[147,637,165],{"class":153},[147,639,640],{"class":168},"\"This won't show\"",[147,642,643],{"class":161}," disabled",[147,645,172],{"class":153},[147,647,648],{"class":149,"line":175},[147,649,650],{"class":153},"  \u003CFluereButton>disabled\u003C\u002FFluereButton>\n",[147,652,653,655,657],{"class":149,"line":181},[147,654,184],{"class":153},[147,656,158],{"class":157},[147,658,172],{"class":153},[110,660,662],{"id":661},"controlled-open","Controlled open",[14,664,665,668,669,672,673,675],{},[26,666,667],{},"v-model:open"," corresponds to ",[26,670,671],{},"ToolTip.IsOpen","; combined with ",[26,674,395],{}," it can implement guides like \"explain elsewhere after clicking a button\".",[139,677,679],{"className":141,"code":678,"language":143,"meta":132,"style":132},"\u003CFluereTooltip v-model:open=\"open\" content=\"Controlled tooltip\">\n  \u003CFluereButton @click=\"open = !open\">Toggle\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n",[26,680,681,713,718],{"__ignoreMap":132},[147,682,683,685,687,690,693,696,698,700,702,704,706,708,711],{"class":149,"line":150},[147,684,154],{"class":153},[147,686,158],{"class":157},[147,688,689],{"class":161}," v-model",[147,691,692],{"class":153},":",[147,694,695],{"class":161},"open",[147,697,165],{"class":153},[147,699,400],{"class":168},[147,701,695],{"class":153},[147,703,400],{"class":168},[147,705,162],{"class":161},[147,707,165],{"class":153},[147,709,710],{"class":168},"\"Controlled tooltip\"",[147,712,172],{"class":153},[147,714,715],{"class":149,"line":175},[147,716,717],{"class":153},"  \u003CFluereButton @click=\"open = !open\">Toggle\u003C\u002FFluereButton>\n",[147,719,720,722,724],{"class":149,"line":181},[147,721,184],{"class":153},[147,723,158],{"class":157},[147,725,172],{"class":153},[110,727,729],{"id":728},"api","API",[731,732,733,752],"table",{},[734,735,736],"thead",{},[737,738,739,743,746,749],"tr",{},[740,741,742],"th",{},"Props",[740,744,745],{},"Type",[740,747,748],{},"Default",[740,750,751],{},"Description",[753,754,755,778,802,827,854,874,892,912],"tbody",{},[737,756,757,762,767,772],{},[758,759,760],"td",{},[26,761,119],{},[758,763,764],{},[26,765,766],{},"string",[758,768,769],{},[26,770,771],{},"—",[758,773,774,775,777],{},"Tooltip text; aligned with the ",[26,776,123],{}," usage",[737,779,780,784,789,794],{},[758,781,782],{},[26,783,695],{},[758,785,786],{},[26,787,788],{},"boolean",[758,790,791],{},[26,792,793],{},"undefined",[758,795,796,797,799,800],{},"Controlled open state (",[26,798,667],{},"); aligned with ",[26,801,671],{},[737,803,804,808,813,818],{},[758,805,806],{},[26,807,191],{},[758,809,810],{},[26,811,812],{},"'top' | 'bottom' | 'left' | 'right'",[758,814,815],{},[26,816,817],{},"'top'",[758,819,820,821,823,824,826],{},"Placement; aligned with ",[26,822,200],{}," (default is ",[26,825,208],{},")",[737,828,829,834,839,844],{},[758,830,831],{},[26,832,833],{},"sideOffset",[758,835,836],{},[26,837,838],{},"number",[758,840,841],{},[26,842,843],{},"4",[758,845,846,847,850,851],{},"Gap along the placement direction (px); aligned with ",[26,848,849],{},"HorizontalOffset"," \u002F ",[26,852,853],{},"VerticalOffset",[737,855,856,861,866,871],{},[758,857,858],{},[26,859,860],{},"align",[758,862,863],{},[26,864,865],{},"'start' | 'center' | 'end'",[758,867,868],{},[26,869,870],{},"'center'",[758,872,873],{},"Alignment perpendicular to the placement direction (WinUI side is always centered + edge-snapped push-back)",[737,875,876,881,885,889],{},[758,877,878],{},[26,879,880],{},"delayDuration",[758,882,883],{},[26,884,838],{},[758,886,887],{},[26,888,771],{},[758,890,891],{},"First-show delay (ms); defaults to inheriting the Provider (400 without a Provider)",[737,893,894,898,902,907],{},[758,895,896],{},[26,897,475],{},[758,899,900],{},[26,901,788],{},[758,903,904],{},[26,905,906],{},"false",[758,908,909,910],{},"Do not expand; aligned with ",[26,911,478],{},[737,913,914,919,923,927],{},[758,915,916],{},[26,917,918],{},"label",[758,920,921],{},[26,922,766],{},[758,924,925],{},[26,926,771],{},[758,928,929],{},"Accessible name of the tip surface; defaults to the content text",[731,931,932,944],{},[734,933,934],{},[737,935,936,939,942],{},[740,937,938],{},"Events (Emits)",[740,940,941],{},"Payload",[740,943,751],{},[753,945,946],{},[737,947,948,953,957],{},[758,949,950],{},[26,951,952],{},"update:open",[758,954,955],{},[26,956,788],{},[758,958,959,960,962,963,966],{},"Update for ",[26,961,667],{},"; aligned with ",[26,964,965],{},"IsOpen"," being overwritten",[731,968,969,978],{},[734,970,971],{},[737,972,973,976],{},[740,974,975],{},"Slots",[740,977,751],{},[753,979,980,993],{},[737,981,982,987],{},[758,983,984],{},[26,985,986],{},"default",[758,988,989,990,826],{},"Trigger element (any focusable element; reka clones it and adds ",[26,991,992],{},"aria-describedby",[737,994,995,999],{},[758,996,997],{},[26,998,119],{},[758,1000,1001,1002,850,1005,1008],{},"Tooltip content; corresponds to WinUI's ",[26,1003,1004],{},"ToolTip.Content",[26,1006,1007],{},"ContentTemplate"," (used for rich content)",[1010,1011,1013],"h3",{"id":1012},"flueretooltipprovider",[26,1014,367],{},[731,1016,1017,1029],{},[734,1018,1019],{},[737,1020,1021,1023,1025,1027],{},[740,1022,742],{},[740,1024,745],{},[740,1026,748],{},[740,1028,751],{},[753,1030,1031,1052],{},[737,1032,1033,1037,1041,1045],{},[758,1034,1035],{},[26,1036,880],{},[758,1038,1039],{},[26,1040,838],{},[758,1042,1043],{},[26,1044,404],{},[758,1046,1047,1048,1051],{},"First-show delay; aligned with ",[26,1049,1050],{},"ToolTipService.InitialShowDelay","'s default (400ms × 2)",[737,1053,1054,1059,1063,1067],{},[758,1055,1056],{},[26,1057,1058],{},"skipDelayDuration",[758,1060,1061],{},[26,1062,838],{},[758,1064,1065],{},[26,1066,418],{},[758,1068,1069,1070,52,1073,826],{},"Re-show window; aligned with ",[26,1071,1072],{},"ToolTipService.BetweenShowDelay",[26,1074,363],{},[452,1076,1077,1102,1107],{},[14,1078,1079,1082,1083,1085,1086,1089,1090,1093,1094,1097,1098,1101],{},[45,1080,1081],{},"Accessibility",": the trigger element gets ",[26,1084,992],{}," attached automatically by reka, pointing to a hidden ",[26,1087,1088],{},"role=\"tooltip\""," element inside the tip surface — consistent with how WinUI associates the ToolTip with the target element (screen readers announce the supplementary description on focus). The tip surface itself is ",[26,1091,1092],{},"pointer-events: none"," (aligned with ",[26,1095,1096],{},"ToolTip.IsHitTestVisible = false",") and contains no focusable elements (aligned with ",[26,1099,1100],{},"IsTabStop = false","), so it does not steal the tab order.",[14,1103,1104],{},[45,1105,1106],{},"Implementation notes",[39,1108,1109,1201,1273,1290,1299,1319,1329,1348],{},[42,1110,1111,1114,1115,1117,1118,1121,1122,850,1125,850,1128,850,1131,1134,1135,850,1138,850,1141,850,1143,1146,1147,52,1150,850,1153,1156,1157,1160,1161,1163,1164,1166,1167],{},[45,1112,1113],{},"The background is a B-tier approximation of Acrylic",": ",[26,1116,76],{}," is an ",[26,1119,1120],{},"AcrylicBrush"," (Light ",[26,1123,1124],{},"TintColor #FCFCFC",[26,1126,1127],{},"TintOpacity 0",[26,1129,1130],{},"FallbackColor #F9F9F9",[26,1132,1133],{},"TintLuminosityOpacity 0.85","; Dark ",[26,1136,1137],{},"#2C2C2C",[26,1139,1140],{},"0.15",[26,1142,1137],{},[26,1144,1145],{},"0.96","). Fluent 2 Web's token table has no \"in-app Acrylic\" tier, so this library maps it to ",[26,1148,1149],{},"colorNeutralCardBackground",[26,1151,1152],{},"#fafafa",[26,1154,1155],{},"#333333","): Dark's TintColor matches its Dark value, and Light's FallbackColor ",[26,1158,1159],{},"#F9F9F9"," differs from ",[26,1162,1152],{}," by only 1 gray step (the reference image measures the tip surface as ",[26,1165,1159],{},"). If you need strict alignment with the real control, override the local variable:",[139,1168,1172],{"className":1169,"code":1170,"language":1171,"meta":132,"style":132},"language-css shiki shiki-themes github-light github-dark",".my-app {\n  --fui-tooltip-background: #f9f9f9;\n}\n","css",[26,1173,1174,1182,1196],{"__ignoreMap":132},[147,1175,1176,1179],{"class":149,"line":150},[147,1177,1178],{"class":161},".my-app",[147,1180,1181],{"class":153}," {\n",[147,1183,1184,1188,1190,1193],{"class":149,"line":175},[147,1185,1187],{"class":1186},"s4XuR","  --fui-tooltip-background",[147,1189,1114],{"class":153},[147,1191,1192],{"class":403},"#f9f9f9",[147,1194,1195],{"class":153},";\n",[147,1197,1198],{"class":149,"line":181},[147,1199,1200],{"class":153},"}\n",[42,1202,1203,1206,1207,850,1210,1213,1214,1217,1218,1221,1222,1225,1226,29,1229,1232,1233,1236,1237,1240,1241],{},[45,1204,1205],{},"The motion value is the only B-tier value",": WinUI's open \u002F close use ",[26,1208,1209],{},"FadeInThemeAnimation",[26,1211,1212],{},"FadeOutThemeAnimation"," (which only change ",[26,1215,1216],{},"LayoutRoot.Opacity",", 0↔1, linear). ",[26,1219,1220],{},"ThemeAnimations.cpp"," merely delegates to ",[26,1223,1224],{},"ThemeGenerator::AddTimelinesForThemeAnimation(TAS_FADEIN \u002F TAS_FADEOUT, …)",", and the duration constant lives in the ",[45,1227,1228],{},"non-public",[26,1230,1231],{},"vsanimation.h"," (not findable in the public source tree) ⇒ this library takes the shortest fade-in tier ",[26,1234,1235],{},"--durationFaster","(100ms) + ",[26,1238,1239],{},"--curveLinear"," and turns it into a component local variable, overridable by consumers in one line:",[139,1242,1244],{"className":1169,"code":1243,"language":1171,"meta":132,"style":132},".fui-tooltip {\n  --fui-tooltip-fade-duration: 167ms;\n}\n",[26,1245,1246,1253,1269],{"__ignoreMap":132},[147,1247,1248,1251],{"class":149,"line":150},[147,1249,1250],{"class":161},".fui-tooltip",[147,1252,1181],{"class":153},[147,1254,1255,1258,1260,1263,1267],{"class":149,"line":175},[147,1256,1257],{"class":1186},"  --fui-tooltip-fade-duration",[147,1259,1114],{"class":153},[147,1261,1262],{"class":403},"167",[147,1264,1266],{"class":1265},"szBVR","ms",[147,1268,1195],{"class":153},[147,1270,1271],{"class":149,"line":181},[147,1272,1200],{"class":153},[42,1274,1275,1281,1282,1285,1286,1289],{},[45,1276,1277,1280],{},[26,1278,1279],{},"prefers-reduced-motion"," has a fallback appearance",": with the animation off, the tip surface is still a fully visible static form (the ",[26,1283,1284],{},"both","-filled final frame ",[26,1287,1288],{},"opacity: 1","), leaving no transparent residue.",[42,1291,1292,1114,1295,1298],{},[45,1293,1294],{},"Z-order",[26,1296,1297],{},"z-index: 1100",", above ContentDialog and Combobox dropdowns at 1000, aligning with \"ToolTip is always on top\".",[42,1300,1301,1304,1305,850,1308,52,1311,1314,1315,1318],{},[45,1302,1303],{},"Touch long-press does not show",": WinUI shows the tip on touch long-press (Touch mode 1× delay); on the Web, reka's triggers only recognize ",[26,1306,1307],{},"pointerenter",[26,1309,1310],{},"pointermove",[26,1312,1313],{},"pointerType === 'touch'"," is explicitly skipped) and ",[26,1316,1317],{},"focus",", so on touch it only shows after \"tap then focus\", and long-press does not show (the native touch tooltip is still available). Known difference.",[42,1320,1321,1328],{},[45,1322,1323,1324,1327],{},"The 5s auto-hide of ",[26,1325,1326],{},"SPI_GETMESSAGEDURATION"," is not implemented",": WinUI moves the ToolTip away from under the mouse and closes it after 5s; on the Web, forcibly hiding by time causes flicker when \"the mouse is still over the control\", so this library only does \"close on leave \u002F blur\".",[42,1330,1331,1337,1338,1340,1341,1343,1344,850,1346,85],{},[45,1332,1333,1336],{},[26,1334,1335],{},"PlacementMode.Mouse"," mouse-following is not implemented",": the default is ",[26,1339,204],{}," (the default placement of an automatic WinUI ToolTip); consumers who want pointer-following can listen to ",[26,1342,1310],{}," themselves and pass ",[26,1345,191],{},[26,1347,833],{},[42,1349,1350,1353,1354,1357,1358,1361,1362,1364,1365,850,1368,1371,1372,1375],{},[45,1351,1352],{},"Known gaps",": high-contrast themes are not implemented (under WinUI HC the foreground \u002F border use ",[26,1355,1356],{},"SystemColorWindowTextColorBrush"," and the background uses ",[26,1359,1360],{},"SystemColorWindowColor","); the remaining supporting ",[26,1363,355],{}," properties (",[26,1366,1367],{},"ShowDuration",[26,1369,1370],{},"KeyboardAcceleratorToolTip"," \u002F the equivalent of ",[26,1373,1374],{},"PlacementTarget",") are not exposed in this release.",[1377,1378,1379],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":132,"searchDepth":175,"depth":175,"links":1381},[1382,1383,1384,1385,1386,1387],{"id":112,"depth":175,"text":113},{"id":191,"depth":175,"text":192},{"id":348,"depth":175,"text":349},{"id":462,"depth":175,"text":463},{"id":661,"depth":175,"text":662},{"id":728,"depth":175,"text":729,"children":1388},[1389],{"id":1012,"depth":181,"text":367},"A lightweight overlay that shows supplementary information next to a UI element on hover or keyboard focus, restyling WinUI 3 ToolTip.","md",{},{"title":5},"\u002Fen\u002Fcomponents\u002Ftooltip",{"title":5,"description":1390},"en\u002Fcomponents\u002Ftooltip","1f5q4xvQ3YyZmBFkwxGSLjsGg8sMvHeJzC7gEsGRIHk",{"id":1399,"title":1400,"body":1401,"description":2575,"extension":1391,"meta":2576,"nav":2577,"navigation":530,"path":2578,"seo":2579,"stem":2580,"__hash__":2581},"content\u002Fcomponents\u002Ftooltip.md","Tooltip 提示",{"type":7,"value":1402,"toc":2565},[1403,1406,1412,1423,1480,1483,1493,1532,1535,1551,1670,1674,1689,1761,1769,1772,1788,1904,1946,1949,1960,2007,2009,2185,2219,2257,2261,2318,2563],[10,1404,1400],{"id":1405},"tooltip-提示",[14,1407,1408,1409,1411],{},"ToolTip 用来补充说明「这个元素做什么」或「用户该做什么」：指针悬停在目标元素上、或目标元素获得键盘焦点时出现（WinUI 官方描述：",[18,1410,20],{},"）。",[14,1413,1414,1415,29,1417,1419,1420,1422],{},"样式、几何与动效对齐 WinUI 3 \u002F Windows App SDK 的 ToolTip（",[26,1416,28],{},[26,1418,32],{},"；",[26,1421,36],{}," 与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 逐字节一致）：",[39,1424,1425,1445,1460,1471],{},[42,1426,1427,1430,1431,1433,1434,1436,1437,1439,1440,1442,1443,1411],{},[45,1428,1429],{},"几何","：内边距 ",[26,1432,51],{},"（",[26,1435,55],{},"）、最大宽 320（",[26,1438,59],{},"）、圆角 4（",[26,1441,63],{},"）、1px 描边（",[26,1444,67],{},[42,1446,1447,1450,1451,1453,1454,1456,1457,1459],{},[45,1448,1449],{},"配色","：底色 ",[26,1452,76],{},"（应用内 Acrylic）、前景 ",[26,1455,80],{},"、描边 ",[26,1458,84],{},"。",[42,1461,1462,1465,1466,1468,1469,1459],{},[45,1463,1464],{},"排版","：字号 12（",[26,1467,94],{},"）、行高 16、",[26,1470,98],{},[42,1472,1473,1476,1477,1479],{},[45,1474,1475],{},"没有箭头","：WinUI 的 ToolTip 模板里只有一个 ",[26,1478,107],{},"，不存在 Pointer \u002F 尖角，本组件同样不渲染箭头。",[110,1481,1482],{"id":1482},"基础用法",[14,1484,1485,1486,1488,1489,1492],{},"包住任意元素即可；",[26,1487,119],{}," 对应 WinUI 的 ",[26,1490,1491],{},"ToolTipService.ToolTip=\"文本\""," 用法。",[126,1494,1496,1500],{"title":1495},"简单 ToolTip（对齐 Gallery 示例）",[130,1497,1498],{"v-slot:preview":132},[134,1499],{},[130,1501,1502],{"v-slot:code":132},[139,1503,1504],{"className":141,"code":142,"language":143,"meta":132,"style":132},[26,1505,1506,1520,1524],{"__ignoreMap":132},[147,1507,1508,1510,1512,1514,1516,1518],{"class":149,"line":150},[147,1509,154],{"class":153},[147,1511,158],{"class":157},[147,1513,162],{"class":161},[147,1515,165],{"class":153},[147,1517,169],{"class":168},[147,1519,172],{"class":153},[147,1521,1522],{"class":149,"line":175},[147,1523,178],{"class":153},[147,1525,1526,1528,1530],{"class":149,"line":181},[147,1527,184],{"class":153},[147,1529,158],{"class":157},[147,1531,172],{"class":153},[110,1533,1534],{"id":1534},"弹出方位",[14,1536,1537,1488,1539,1541,1542,1544,1545,1547,1548,1550],{},[26,1538,191],{},[26,1540,200],{},"，缺省 ",[26,1543,204],{},"（即 WinUI 自动 ToolTip 的 ",[26,1546,208],{},"）。空间不足时组件会自动翻转到相反方位并把提示面推回视口内（对齐 ",[26,1549,212],{}," 的「首选方位 → 对侧 → 贴边回推」）。",[126,1552,1554,1558],{"title":1553},"四个方位",[130,1555,1556],{"v-slot:preview":132},[219,1557],{},[130,1559,1560],{"v-slot:code":132},[139,1561,1563],{"className":141,"code":1562,"language":143,"meta":132,"style":132},"\u003CFluereTooltip content=\"Placement = Top（默认）\" placement=\"top\">\n  \u003CFluereButton>Top\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n\u003CFluereTooltip content=\"Placement = Bottom\" placement=\"bottom\">…\u003C\u002FFluereTooltip>\n\u003CFluereTooltip content=\"Placement = Left\" placement=\"left\">…\u003C\u002FFluereTooltip>\n\u003CFluereTooltip content=\"Placement = Right\" placement=\"right\">…\u003C\u002FFluereTooltip>\n",[26,1564,1565,1586,1590,1598,1622,1646],{"__ignoreMap":132},[147,1566,1567,1569,1571,1573,1575,1578,1580,1582,1584],{"class":149,"line":150},[147,1568,154],{"class":153},[147,1570,158],{"class":157},[147,1572,162],{"class":161},[147,1574,165],{"class":153},[147,1576,1577],{"class":168},"\"Placement = Top（默认）\"",[147,1579,243],{"class":161},[147,1581,165],{"class":153},[147,1583,248],{"class":168},[147,1585,172],{"class":153},[147,1587,1588],{"class":149,"line":175},[147,1589,255],{"class":153},[147,1591,1592,1594,1596],{"class":149,"line":181},[147,1593,184],{"class":153},[147,1595,158],{"class":157},[147,1597,172],{"class":153},[147,1599,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620],{"class":149,"line":266},[147,1601,154],{"class":153},[147,1603,158],{"class":157},[147,1605,162],{"class":161},[147,1607,165],{"class":153},[147,1609,277],{"class":168},[147,1611,243],{"class":161},[147,1613,165],{"class":153},[147,1615,284],{"class":168},[147,1617,287],{"class":153},[147,1619,158],{"class":157},[147,1621,172],{"class":153},[147,1623,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644],{"class":149,"line":294},[147,1625,154],{"class":153},[147,1627,158],{"class":157},[147,1629,162],{"class":161},[147,1631,165],{"class":153},[147,1633,305],{"class":168},[147,1635,243],{"class":161},[147,1637,165],{"class":153},[147,1639,312],{"class":168},[147,1641,287],{"class":153},[147,1643,158],{"class":157},[147,1645,172],{"class":153},[147,1647,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668],{"class":149,"line":321},[147,1649,154],{"class":153},[147,1651,158],{"class":157},[147,1653,162],{"class":161},[147,1655,165],{"class":153},[147,1657,332],{"class":168},[147,1659,243],{"class":161},[147,1661,165],{"class":153},[147,1663,339],{"class":168},[147,1665,287],{"class":153},[147,1667,158],{"class":157},[147,1669,172],{"class":153},[110,1671,1673],{"id":1672},"显示延时与重展示","显示延时与「重展示」",[14,1675,1676,1677,1679,1680,1682,1683,1685,1686,1688],{},"WinUI 把延时交给进程级的 ",[26,1678,355],{},"：首次显示 = ",[26,1681,359],{},"(400ms) × 2（鼠标 \u002F 键盘）或 × 1（触摸），距上次打开不足 ",[26,1684,363],{},"(200ms) 时改走「重展示」路径（鼠标 1.5×、触摸 0）。",[26,1687,367],{}," 就是这层服务：把一组 ToolTip 包起来，它们共享同一个重展示窗口。",[126,1690,1692,1696],{"title":1691},"Provider（对齐 ToolTipService）与单例延时",[130,1693,1694],{"v-slot:preview":132},[375,1695],{},[130,1697,1698],{"v-slot:code":132},[139,1699,1701],{"className":141,"code":1700,"language":143,"meta":132,"style":132},"\u003CFluereTooltipProvider :delay-duration=\"400\" :skip-delay-duration=\"200\">\n  \u003CFluereTooltip content=\"Simple ToolTip\">\n    \u003CFluereButton>默认 400ms\u003C\u002FFluereButton>\n  \u003C\u002FFluereTooltip>\n  \u003CFluereTooltip content=\"立即显示\" :delay-duration=\"0\">…\u003C\u002FFluereTooltip>\n\u003C\u002FFluereTooltipProvider>\n",[26,1702,1703,1735,1739,1744,1748,1753],{"__ignoreMap":132},[147,1704,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729,1731,1733],{"class":149,"line":150},[147,1706,154],{"class":153},[147,1708,367],{"class":157},[147,1710,392],{"class":153},[147,1712,395],{"class":161},[147,1714,165],{"class":153},[147,1716,400],{"class":168},[147,1718,404],{"class":403},[147,1720,400],{"class":168},[147,1722,392],{"class":153},[147,1724,411],{"class":161},[147,1726,165],{"class":153},[147,1728,400],{"class":168},[147,1730,418],{"class":403},[147,1732,400],{"class":168},[147,1734,172],{"class":153},[147,1736,1737],{"class":149,"line":175},[147,1738,427],{"class":153},[147,1740,1741],{"class":149,"line":181},[147,1742,1743],{"class":153},"    \u003CFluereButton>默认 400ms\u003C\u002FFluereButton>\n",[147,1745,1746],{"class":149,"line":266},[147,1747,437],{"class":153},[147,1749,1750],{"class":149,"line":294},[147,1751,1752],{"class":153},"  \u003CFluereTooltip content=\"立即显示\" :delay-duration=\"0\">…\u003C\u002FFluereTooltip>\n",[147,1754,1755,1757,1759],{"class":149,"line":321},[147,1756,184],{"class":153},[147,1758,367],{"class":157},[147,1760,172],{"class":153},[452,1762,1763],{},[14,1764,1765,1766,1768],{},"不套 ",[26,1767,367],{}," 也能单独使用：组件会自带一层缺省 Provider（400 \u002F 200），只是这样「多个 ToolTip 共享重展示窗口」的手感就没有了。",[110,1770,1771],{"id":1771},"内容形态与禁用",[14,1773,1774,1776,1777,1779,1780,1488,1782,1784,1785,1787],{},[26,1775,119],{}," 传纯文本；需要富内容（图标、快捷键、多段文字）时用 ",[26,1778,471],{}," 插槽。",[26,1781,475],{},[26,1783,478],{},"（WinUI 在该分支把 Popup 的 ",[26,1786,482],{}," 置 0，本库表达为不展开）。",[126,1789,1791,1795],{"title":1790},"纯文本 \u002F 长文本换行 \u002F 富内容 \u002F disabled",[130,1792,1793],{"v-slot:preview":132},[490,1794],{},[130,1796,1797],{"v-slot:code":132},[139,1798,1800],{"className":141,"code":1799,"language":143,"meta":132,"style":132},"\u003CFluereTooltip content=\"Simple ToolTip\">\n  \u003CFluereButton>纯文本（content）\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n\n\u003CFluereTooltip :content=\"longText\">\n  \u003CFluereButton>长文本自动换行\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n\n\u003CFluereTooltip>\n  \u003CFluereButton>富内容（#content）\u003C\u002FFluereButton>\n  \u003Ctemplate #content>\n    \u003Cspan>\u003Cstrong>保存\u003C\u002Fstrong> Ctrl + S\u003C\u002Fspan>\n  \u003C\u002Ftemplate>\n\u003C\u002FFluereTooltip>\n",[26,1801,1802,1816,1821,1829,1833,1853,1858,1866,1870,1878,1883,1887,1892,1896],{"__ignoreMap":132},[147,1803,1804,1806,1808,1810,1812,1814],{"class":149,"line":150},[147,1805,154],{"class":153},[147,1807,158],{"class":157},[147,1809,162],{"class":161},[147,1811,165],{"class":153},[147,1813,169],{"class":168},[147,1815,172],{"class":153},[147,1817,1818],{"class":149,"line":175},[147,1819,1820],{"class":153},"  \u003CFluereButton>纯文本（content）\u003C\u002FFluereButton>\n",[147,1822,1823,1825,1827],{"class":149,"line":181},[147,1824,184],{"class":153},[147,1826,158],{"class":157},[147,1828,172],{"class":153},[147,1830,1831],{"class":149,"line":266},[147,1832,531],{"emptyLinePlaceholder":530},[147,1834,1835,1837,1839,1841,1843,1845,1847,1849,1851],{"class":149,"line":294},[147,1836,154],{"class":153},[147,1838,158],{"class":157},[147,1840,392],{"class":153},[147,1842,119],{"class":161},[147,1844,165],{"class":153},[147,1846,400],{"class":168},[147,1848,548],{"class":153},[147,1850,400],{"class":168},[147,1852,172],{"class":153},[147,1854,1855],{"class":149,"line":321},[147,1856,1857],{"class":153},"  \u003CFluereButton>长文本自动换行\u003C\u002FFluereButton>\n",[147,1859,1860,1862,1864],{"class":149,"line":560},[147,1861,184],{"class":153},[147,1863,158],{"class":157},[147,1865,172],{"class":153},[147,1867,1868],{"class":149,"line":569},[147,1869,531],{"emptyLinePlaceholder":530},[147,1871,1872,1874,1876],{"class":149,"line":574},[147,1873,154],{"class":153},[147,1875,158],{"class":157},[147,1877,172],{"class":153},[147,1879,1880],{"class":149,"line":583},[147,1881,1882],{"class":153},"  \u003CFluereButton>富内容（#content）\u003C\u002FFluereButton>\n",[147,1884,1885],{"class":149,"line":589},[147,1886,592],{"class":153},[147,1888,1889],{"class":149,"line":595},[147,1890,1891],{"class":153},"    \u003Cspan>\u003Cstrong>保存\u003C\u002Fstrong> Ctrl + S\u003C\u002Fspan>\n",[147,1893,1894],{"class":149,"line":601},[147,1895,604],{"class":153},[147,1897,1898,1900,1902],{"class":149,"line":607},[147,1899,184],{"class":153},[147,1901,158],{"class":157},[147,1903,172],{"class":153},[126,1905,1906,1910],{"title":475},[130,1907,1908],{"v-slot:preview":132},[619,1909],{},[130,1911,1912],{"v-slot:code":132},[139,1913,1915],{"className":141,"code":1914,"language":143,"meta":132,"style":132},"\u003CFluereTooltip content=\"这条不会显示\" disabled>\n  \u003CFluereButton>disabled\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n",[26,1916,1917,1934,1938],{"__ignoreMap":132},[147,1918,1919,1921,1923,1925,1927,1930,1932],{"class":149,"line":150},[147,1920,154],{"class":153},[147,1922,158],{"class":157},[147,1924,162],{"class":161},[147,1926,165],{"class":153},[147,1928,1929],{"class":168},"\"这条不会显示\"",[147,1931,643],{"class":161},[147,1933,172],{"class":153},[147,1935,1936],{"class":149,"line":175},[147,1937,650],{"class":153},[147,1939,1940,1942,1944],{"class":149,"line":181},[147,1941,184],{"class":153},[147,1943,158],{"class":157},[147,1945,172],{"class":153},[110,1947,1948],{"id":1948},"受控展开",[14,1950,1951,1953,1954,1956,1957,1959],{},[26,1952,667],{}," 对应 ",[26,1955,671],{},"；配合 ",[26,1958,395],{}," 可以做出「点击按钮后在别处解释」之类的引导。",[139,1961,1963],{"className":141,"code":1962,"language":143,"meta":132,"style":132},"\u003CFluereTooltip v-model:open=\"open\" content=\"受控显示的提示\">\n  \u003CFluereButton @click=\"open = !open\">切换\u003C\u002FFluereButton>\n\u003C\u002FFluereTooltip>\n",[26,1964,1965,1994,1999],{"__ignoreMap":132},[147,1966,1967,1969,1971,1973,1975,1977,1979,1981,1983,1985,1987,1989,1992],{"class":149,"line":150},[147,1968,154],{"class":153},[147,1970,158],{"class":157},[147,1972,689],{"class":161},[147,1974,692],{"class":153},[147,1976,695],{"class":161},[147,1978,165],{"class":153},[147,1980,400],{"class":168},[147,1982,695],{"class":153},[147,1984,400],{"class":168},[147,1986,162],{"class":161},[147,1988,165],{"class":153},[147,1990,1991],{"class":168},"\"受控显示的提示\"",[147,1993,172],{"class":153},[147,1995,1996],{"class":149,"line":175},[147,1997,1998],{"class":153},"  \u003CFluereButton @click=\"open = !open\">切换\u003C\u002FFluereButton>\n",[147,2000,2001,2003,2005],{"class":149,"line":181},[147,2002,184],{"class":153},[147,2004,158],{"class":157},[147,2006,172],{"class":153},[110,2008,729],{"id":728},[731,2010,2011,2027],{},[734,2012,2013],{},[737,2014,2015,2018,2021,2024],{},[740,2016,2017],{},"属性（Props）",[740,2019,2020],{},"类型",[740,2022,2023],{},"默认",[740,2025,2026],{},"说明",[753,2028,2029,2049,2071,2094,2115,2132,2149,2168],{},[737,2030,2031,2035,2039,2043],{},[758,2032,2033],{},[26,2034,119],{},[758,2036,2037],{},[26,2038,766],{},[758,2040,2041],{},[26,2042,771],{},[758,2044,2045,2046,2048],{},"提示文本；对齐 ",[26,2047,1491],{}," 的用法",[737,2050,2051,2055,2059,2063],{},[758,2052,2053],{},[26,2054,695],{},[758,2056,2057],{},[26,2058,788],{},[758,2060,2061],{},[26,2062,793],{},[758,2064,2065,2066,2068,2069],{},"受控展开状态（",[26,2067,667],{},"）；对齐 ",[26,2070,671],{},[737,2072,2073,2077,2081,2085],{},[758,2074,2075],{},[26,2076,191],{},[758,2078,2079],{},[26,2080,812],{},[758,2082,2083],{},[26,2084,817],{},[758,2086,2087,2088,2090,2091,2093],{},"弹出方位；对齐 ",[26,2089,200],{},"（缺省即 ",[26,2092,208],{},"）",[737,2095,2096,2100,2104,2108],{},[758,2097,2098],{},[26,2099,833],{},[758,2101,2102],{},[26,2103,838],{},[758,2105,2106],{},[26,2107,843],{},[758,2109,2110,2111,850,2113],{},"沿弹出方向的间距（px）；对齐 ",[26,2112,849],{},[26,2114,853],{},[737,2116,2117,2121,2125,2129],{},[758,2118,2119],{},[26,2120,860],{},[758,2122,2123],{},[26,2124,865],{},[758,2126,2127],{},[26,2128,870],{},[758,2130,2131],{},"垂直于弹出方向的对齐方式（WinUI 侧恒为居中 + 贴边回推）",[737,2133,2134,2138,2142,2146],{},[758,2135,2136],{},[26,2137,880],{},[758,2139,2140],{},[26,2141,838],{},[758,2143,2144],{},[26,2145,771],{},[758,2147,2148],{},"首次显示延时（ms）；缺省继承 Provider（无 Provider 时 400）",[737,2150,2151,2155,2159,2163],{},[758,2152,2153],{},[26,2154,475],{},[758,2156,2157],{},[26,2158,788],{},[758,2160,2161],{},[26,2162,906],{},[758,2164,2165,2166],{},"不展开；对齐 ",[26,2167,478],{},[737,2169,2170,2174,2178,2182],{},[758,2171,2172],{},[26,2173,918],{},[758,2175,2176],{},[26,2177,766],{},[758,2179,2180],{},[26,2181,771],{},[758,2183,2184],{},"提示面的可访问名；缺省取内容文本",[731,2186,2187,2199],{},[734,2188,2189],{},[737,2190,2191,2194,2197],{},[740,2192,2193],{},"事件（Emits）",[740,2195,2196],{},"载荷",[740,2198,2026],{},[753,2200,2201],{},[737,2202,2203,2207,2211],{},[758,2204,2205],{},[26,2206,952],{},[758,2208,2209],{},[26,2210,788],{},[758,2212,2213,2215,2216,2218],{},[26,2214,667],{}," 的更新；对齐 ",[26,2217,965],{}," 被改写",[731,2220,2221,2230],{},[734,2222,2223],{},[737,2224,2225,2228],{},[740,2226,2227],{},"插槽（Slots）",[740,2229,2026],{},[753,2231,2232,2243],{},[737,2233,2234,2238],{},[758,2235,2236],{},[26,2237,986],{},[758,2239,2240,2241,2093],{},"触发元素（任意可聚焦元素；reka 会克隆它并补上 ",[26,2242,992],{},[737,2244,2245,2249],{},[758,2246,2247],{},[26,2248,119],{},[758,2250,2251,2252,850,2254,2256],{},"提示内容；对应 WinUI 的 ",[26,2253,1004],{},[26,2255,1007],{},"（富内容用）",[1010,2258,2259],{"id":1012},[26,2260,367],{},[731,2262,2263,2275],{},[734,2264,2265],{},[737,2266,2267,2269,2271,2273],{},[740,2268,2017],{},[740,2270,2020],{},[740,2272,2023],{},[740,2274,2026],{},[753,2276,2277,2297],{},[737,2278,2279,2283,2287,2291],{},[758,2280,2281],{},[26,2282,880],{},[758,2284,2285],{},[26,2286,838],{},[758,2288,2289],{},[26,2290,404],{},[758,2292,2293,2294,2296],{},"首次显示延时；对齐 ",[26,2295,1050],{}," 的缺省（400ms × 2）",[737,2298,2299,2303,2307,2311],{},[758,2300,2301],{},[26,2302,1058],{},[758,2304,2305],{},[26,2306,838],{},[758,2308,2309],{},[26,2310,418],{},[758,2312,2313,2314,1433,2316,2093],{},"重展示窗口；对齐 ",[26,2315,1072],{},[26,2317,363],{},[452,2319,2320,2341,2346],{},[14,2321,2322,2325,2326,2328,2329,2331,2332,2334,2335,2337,2338,2340],{},[45,2323,2324],{},"无障碍","：触发元素由 reka 自动挂 ",[26,2327,992],{},"，指向提示面内的隐藏 ",[26,2330,1088],{}," 元素 —— 与 WinUI 把 ToolTip 关联到目标元素的语义一致（读屏在聚焦时朗读补充说明）。提示面本身 ",[26,2333,1092],{},"（对齐 ",[26,2336,1096],{},"），内部不含可聚焦元素（对齐 ",[26,2339,1100],{},"），不会抢 Tab 序。",[14,2342,2343],{},[45,2344,2345],{},"实现要点",[39,2347,2348,2418,2476,2490,2498,2514,2523,2541],{},[42,2349,2350,2353,2354,2356,2357,2359,2360,850,2362,850,2364,850,2366,2368,2369,850,2371,850,2373,850,2375,2377,2378,1433,2380,850,2382,2384,2385,2387,2388,2390,2391,2393,2394],{},[45,2351,2352],{},"底色是 Acrylic 的 B 级近似","：",[26,2355,76],{}," 是 ",[26,2358,1120],{},"（Light ",[26,2361,1124],{},[26,2363,1127],{},[26,2365,1130],{},[26,2367,1133],{},"；Dark ",[26,2370,1137],{},[26,2372,1140],{},[26,2374,1137],{},[26,2376,1145],{},"）。Fluent 2 Web 的 token 表里没有「应用内 Acrylic」这一档，本库映射到 ",[26,2379,1149],{},[26,2381,1152],{},[26,2383,1155],{},"）：Dark 的 TintColor 与它的 Dark 值同值，Light 的 FallbackColor ",[26,2386,1159],{}," 与 ",[26,2389,1152],{}," 只差 1 个灰阶（参考图实测提示面就是 ",[26,2392,1159],{},"）。需要严格对齐实机时覆盖局部变量即可：",[139,2395,2396],{"className":1169,"code":1170,"language":1171,"meta":132,"style":132},[26,2397,2398,2404,2414],{"__ignoreMap":132},[147,2399,2400,2402],{"class":149,"line":150},[147,2401,1178],{"class":161},[147,2403,1181],{"class":153},[147,2405,2406,2408,2410,2412],{"class":149,"line":175},[147,2407,1187],{"class":1186},[147,2409,1114],{"class":153},[147,2411,1192],{"class":403},[147,2413,1195],{"class":153},[147,2415,2416],{"class":149,"line":181},[147,2417,1200],{"class":153},[42,2419,2420,2423,2424,850,2426,2428,2429,2431,2432,2434,2435,2437,2438,2441,2442,2444,2445,1236,2447,2449,2450],{},[45,2421,2422],{},"动效取值是唯一一处 B 级值","：WinUI 打开 \u002F 关闭分别是 ",[26,2425,1209],{},[26,2427,1212],{},"（只改 ",[26,2430,1216],{},"，0↔1，linear）。",[26,2433,1220],{}," 只转调 ",[26,2436,1224],{},"，而时长常量落在",[45,2439,2440],{},"非公开","的 ",[26,2443,1231],{},"（公开源码树里查不到）⇒ 本库取最短淡入档 ",[26,2446,1235],{},[26,2448,1239],{},"，并落成组件局部变量，消费方可一行覆盖：",[139,2451,2452],{"className":1169,"code":1243,"language":1171,"meta":132,"style":132},[26,2453,2454,2460,2472],{"__ignoreMap":132},[147,2455,2456,2458],{"class":149,"line":150},[147,2457,1250],{"class":161},[147,2459,1181],{"class":153},[147,2461,2462,2464,2466,2468,2470],{"class":149,"line":175},[147,2463,1257],{"class":1186},[147,2465,1114],{"class":153},[147,2467,1262],{"class":403},[147,2469,1266],{"class":1265},[147,2471,1195],{"class":153},[147,2473,2474],{"class":149,"line":181},[147,2475,1200],{"class":153},[42,2477,2478,2483,2484,2486,2487,2489],{},[45,2479,2480,2482],{},[26,2481,1279],{}," 有兜底外观","：动画关掉后提示面仍是完全可见的静态形态（",[26,2485,1284],{}," 填充的末帧 ",[26,2488,1288],{},"），不会留下透明残留。",[42,2491,2492,2353,2495,2497],{},[45,2493,2494],{},"层级",[26,2496,1297],{},"，高于 ContentDialog 与 Combobox 下拉的 1000，对齐「ToolTip 永远在最上层」。",[42,2499,2500,2503,2504,850,2506,1433,2508,2510,2511,2513],{},[45,2501,2502],{},"触摸长按不弹","：WinUI 触摸长按（Touch 模式 1x 延时）会弹提示；Web 侧 reka 的触发只认 ",[26,2505,1307],{},[26,2507,1310],{},[26,2509,1313],{}," 被显式跳过）与 ",[26,2512,1317],{},"，故触摸端只在「点按后获得焦点」时生效，长按不弹（触摸端的原生 tooltip 仍可用）。属已知差异。",[42,2515,2516,2522],{},[45,2517,2518,2519,2521],{},"不实现 ",[26,2520,1326],{}," 的 5s 自动隐藏","：WinUI 会在 5s 后把 ToolTip 从鼠标下方挪开并关闭；Web 上按时间强行隐藏会在「鼠标仍停在控件上」时产生闪烁，故本库只做「离开 \u002F 失焦即关」。",[42,2524,2525,2530,2531,2533,2534,2536,2537,850,2539,1459],{},[45,2526,2518,2527,2529],{},[26,2528,1335],{}," 的鼠标跟随","：默认 ",[26,2532,204],{},"（WinUI 自动 ToolTip 的缺省方位），需要跟随指针的消费方可自行监听 ",[26,2535,1310],{}," 后传入 ",[26,2538,191],{},[26,2540,833],{},[42,2542,2543,2546,2547,2549,2550,2552,2553,2555,2556,850,2558,850,2560,2562],{},[45,2544,2545],{},"已知缺口","：高对比度主题未实现（WinUI HC 下前景 \u002F 描边走 ",[26,2548,1356],{},"、底色走 ",[26,2551,1360],{},"）；",[26,2554,355],{}," 的其余随附属性（",[26,2557,1367],{},[26,2559,1370],{},[26,2561,1374],{}," 的等价物）本期不暴露。",[1377,2564,1379],{},{"title":132,"searchDepth":175,"depth":175,"links":2566},[2567,2568,2569,2570,2571,2572],{"id":1482,"depth":175,"text":1482},{"id":1534,"depth":175,"text":1534},{"id":1672,"depth":175,"text":1673},{"id":1771,"depth":175,"text":1771},{"id":1948,"depth":175,"text":1948},{"id":728,"depth":175,"text":729,"children":2573},[2574],{"id":1012,"depth":181,"text":367},"悬停或键盘聚焦时，在 UI 元素旁显示补充信息的轻量浮层，样式还原 WinUI 3 ToolTip。",{},{"title":1400},"\u002Fcomponents\u002Ftooltip",{"title":1400,"description":2575},"components\u002Ftooltip","FcYhhruVSmVDLITgUZh2sq88-BiviZppHscffasB1jQ",1792150932558]