[{"data":1,"prerenderedAt":854},["ShallowReactive",2],{"landing-copy":3,"\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip":65,"nav:v1":710},{"id":4,"extension":5,"meta":6,"sections":7,"stem":62,"tagline":63,"__hash__":64},"landing\u002Flanding.yml","yml",{},[8,18,22,29,33,40,47,51,57],{"id":9,"headline":10,"body":11,"cta":12,"secondary":15},"hero","The bare minimum for elegant interfaces.","Three classes, no framework, {css.kB}. A CSS and JavaScript library with no reset, no font, no runtime dependencies and no rule outside a `pui-` class; the browser does the work.",{"label":13,"to":14},"Get started","\u002Fdocs",{"label":16,"to":17},"Migrating from 0.x","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-0-x",{"id":19,"headline":20,"body":21},"size","{css.kB}. Measured, not promised.","`perfectui.css` is {css.bytes} bytes gzip; the optional JavaScript loader is {js.bytes}. The bars below are the same measurement run on the published builds of the alternatives.",{"id":23,"headline":24,"body":25,"cta":26},"classes","A shape, a style, a colour.","Every element is up to three classes you can combine freely: what it is, how the colour is applied, which colour. Seven colours and four styles give 28 looks per shape, and adding a colour never multiplies your classes.",{"label":27,"to":28},"See the components","\u002Fdocs\u002Fcomponents\u002Fbutton",{"id":30,"headline":31,"body":32},"overlays","Overlays without a plugin.","Modals are `\u003Cdialog>`, menus are `popover`, tooltips are `interestfor`, accordions are `\u003Cdetails>`. The optional loader downloads a fallback only when a browser is missing one of them.",{"id":34,"headline":35,"body":36,"cta":37},"mode-theme","One attribute for dark mode. One variable for your colour.","With no attribute, perfectui follows the operating system. Set `data-pui-mode` to choose, and `--pui-theme` to make every component yours.",{"label":38,"to":39},"Dark mode docs","\u002Fdocs\u002Fcustomization\u002Fdark-mode",{"id":41,"headline":42,"body":43,"cta":44},"tailwind","Your utilities always win.","One `@layer` line keeps Tailwind's reset below perfectui and every utility above it.",{"label":45,"to":46},"Tailwind guide","\u002Fdocs\u002Fgetting-started\u002Ftailwind-css",{"id":48,"headline":49,"body":50},"nothing-to-undo","Nothing you have to undo.","No reset to override, no font to remove, no `!important` to beat, no initialiser to call after rendering, no guard for server rendering. ESM only, nothing on `window`.",{"id":52,"headline":53,"body":54,"cta":55},"migration","Coming from 0.x?","1.0 is a rewrite: every class is prefixed, styles and colours are separate classes, and the browser replaced the JavaScript. The guide lists every change.",{"label":56,"to":17},"Read the migration guide",{"id":58,"headline":59,"body":60,"cta":61},"install","Install it your way.","A package for npm, yarn, pnpm or bun, or two tags from a CDN. Import everything or only the components you use.",{"label":13,"to":14},"landing","Components the browser already knows how to run.","QsxvMnCQ8bgawTVgX6YLkvZoqMKaQbFt0j1urNnrKQw",{"id":66,"title":67,"body":68,"changed":699,"description":700,"extension":701,"from":699,"meta":702,"navigation":146,"path":703,"seo":704,"since":699,"stem":705,"tags":706,"to":699,"__hash__":709},"docs_v1\u002Fdocs\u002Fv1\u002F04.components\u002F11.tooltip.md","Tooltip",{"type":69,"value":70,"toc":692},"minimark",[71,207,214,223,228,231,380,441,445,448,567,571,669,678,685,688],[72,73,75],"example",{"name":74},"basic",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-html shiki shiki-themes perfectui-site","\u003Cbutton class=\"pui-btn pui-outline pui-surface\" interestfor=\"help\">?\u003C\u002Fbutton>\n\n\u003Cdiv class=\"pui-tooltip\" id=\"help\" popover=\"hint\">\n  We never share your email.\n\u003C\u002Fdiv>\n","html","",[83,84,85,141,148,192,198],"code",{"__ignoreMap":81},[86,87,90,94,98,102,105,108,112,114,117,119,121,124,126,129,133,136,138],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"s8qk9","\u003C",[86,95,97],{"class":96},"sz5At","button",[86,99,101],{"class":100},"sz6eq"," class",[86,103,104],{"class":92},"=",[86,106,107],{"class":92},"\"",[86,109,111],{"class":110},"s8AH5","pui-btn pui-outline pui-surface",[86,113,107],{"class":92},[86,115,116],{"class":100}," interestfor",[86,118,104],{"class":92},[86,120,107],{"class":92},[86,122,123],{"class":110},"help",[86,125,107],{"class":92},[86,127,128],{"class":92},">",[86,130,132],{"class":131},"stV6K","?",[86,134,135],{"class":92},"\u003C\u002F",[86,137,97],{"class":96},[86,139,140],{"class":92},">\n",[86,142,144],{"class":88,"line":143},2,[86,145,147],{"emptyLinePlaceholder":146},true,"\n",[86,149,151,153,156,158,160,162,165,167,170,172,174,176,178,181,183,185,188,190],{"class":88,"line":150},3,[86,152,93],{"class":92},[86,154,155],{"class":96},"div",[86,157,101],{"class":100},[86,159,104],{"class":92},[86,161,107],{"class":92},[86,163,164],{"class":110},"pui-tooltip",[86,166,107],{"class":92},[86,168,169],{"class":100}," id",[86,171,104],{"class":92},[86,173,107],{"class":92},[86,175,123],{"class":110},[86,177,107],{"class":92},[86,179,180],{"class":100}," popover",[86,182,104],{"class":92},[86,184,107],{"class":92},[86,186,187],{"class":110},"hint",[86,189,107],{"class":92},[86,191,140],{"class":92},[86,193,195],{"class":88,"line":194},4,[86,196,197],{"class":131},"  We never share your email.\n",[86,199,201,203,205],{"class":88,"line":200},5,[86,202,135],{"class":92},[86,204,155],{"class":96},[86,206,140],{"class":92},[208,209,210,213],"p",{},[83,211,212],{},"interestfor"," names the tooltip, and that is the whole API.",[215,216,217],"warning",{},[208,218,219,220,222],{},"This is the component that most needs the script today: ",[83,221,212],{}," is only in Chromium so far, so everywhere else the fallback provides the hover, focus and long press behavior.",[224,225,227],"h2",{"id":226},"placement","Placement",[208,229,230],{},"The tooltip sits above its trigger and flips below when there is no room. Three classes move it elsewhere:",[76,232,234],{"className":78,"code":233,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-tooltip pui-bottom\" id=\"help\" popover=\"hint\">Below\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-tooltip pui-start\" id=\"help\" popover=\"hint\">Before\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-tooltip pui-end\" id=\"help\" popover=\"hint\">After\u003C\u002Fdiv>\n",[83,235,236,284,332],{"__ignoreMap":81},[86,237,238,240,242,244,246,248,251,253,255,257,259,261,263,265,267,269,271,273,275,278,280,282],{"class":88,"line":89},[86,239,93],{"class":92},[86,241,155],{"class":96},[86,243,101],{"class":100},[86,245,104],{"class":92},[86,247,107],{"class":92},[86,249,250],{"class":110},"pui-tooltip pui-bottom",[86,252,107],{"class":92},[86,254,169],{"class":100},[86,256,104],{"class":92},[86,258,107],{"class":92},[86,260,123],{"class":110},[86,262,107],{"class":92},[86,264,180],{"class":100},[86,266,104],{"class":92},[86,268,107],{"class":92},[86,270,187],{"class":110},[86,272,107],{"class":92},[86,274,128],{"class":92},[86,276,277],{"class":131},"Below",[86,279,135],{"class":92},[86,281,155],{"class":96},[86,283,140],{"class":92},[86,285,286,288,290,292,294,296,299,301,303,305,307,309,311,313,315,317,319,321,323,326,328,330],{"class":88,"line":143},[86,287,93],{"class":92},[86,289,155],{"class":96},[86,291,101],{"class":100},[86,293,104],{"class":92},[86,295,107],{"class":92},[86,297,298],{"class":110},"pui-tooltip pui-start",[86,300,107],{"class":92},[86,302,169],{"class":100},[86,304,104],{"class":92},[86,306,107],{"class":92},[86,308,123],{"class":110},[86,310,107],{"class":92},[86,312,180],{"class":100},[86,314,104],{"class":92},[86,316,107],{"class":92},[86,318,187],{"class":110},[86,320,107],{"class":92},[86,322,128],{"class":92},[86,324,325],{"class":131},"Before",[86,327,135],{"class":92},[86,329,155],{"class":96},[86,331,140],{"class":92},[86,333,334,336,338,340,342,344,347,349,351,353,355,357,359,361,363,365,367,369,371,374,376,378],{"class":88,"line":150},[86,335,93],{"class":92},[86,337,155],{"class":96},[86,339,101],{"class":100},[86,341,104],{"class":92},[86,343,107],{"class":92},[86,345,346],{"class":110},"pui-tooltip pui-end",[86,348,107],{"class":92},[86,350,169],{"class":100},[86,352,104],{"class":92},[86,354,107],{"class":92},[86,356,123],{"class":110},[86,358,107],{"class":92},[86,360,180],{"class":100},[86,362,104],{"class":92},[86,364,107],{"class":92},[86,366,187],{"class":110},[86,368,107],{"class":92},[86,370,128],{"class":92},[86,372,373],{"class":131},"After",[86,375,135],{"class":92},[86,377,155],{"class":96},[86,379,140],{"class":92},[381,382,383,396],"table",{},[384,385,386],"thead",{},[387,388,389,393],"tr",{},[390,391,392],"th",{},"Class",[390,394,395],{},"Where it goes",[397,398,399,411,421,431],"tbody",{},[387,400,401,408],{},[402,403,404],"td",{},[405,406,407],"em",{},"(none)",[402,409,410],{},"above",[387,412,413,418],{},[402,414,415],{},[83,416,417],{},"pui-bottom",[402,419,420],{},"below",[387,422,423,428],{},[402,424,425],{},[83,426,427],{},"pui-start",[402,429,430],{},"to the left, or the right in RTL",[387,432,433,438],{},[402,434,435],{},[83,436,437],{},"pui-end",[402,439,440],{},"to the right, or the left in RTL",[224,442,444],{"id":443},"styles","Styles",[208,446,447],{},"A tooltip is an ordinary colorable element, so it takes any style and color pair:",[76,449,451],{"className":78,"code":450,"language":80,"meta":81,"style":81},"\u003Cdiv class=\"pui-tooltip pui-solid pui-inverse\" popover=\"hint\">Dark\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-tooltip pui-solid pui-theme\" popover=\"hint\">Theme\u003C\u002Fdiv>\n\u003Cdiv class=\"pui-tooltip pui-soft pui-warn\" popover=\"hint\">A warning\u003C\u002Fdiv>\n",[83,452,453,491,529],{"__ignoreMap":81},[86,454,455,457,459,461,463,465,468,470,472,474,476,478,480,482,485,487,489],{"class":88,"line":89},[86,456,93],{"class":92},[86,458,155],{"class":96},[86,460,101],{"class":100},[86,462,104],{"class":92},[86,464,107],{"class":92},[86,466,467],{"class":110},"pui-tooltip pui-solid pui-inverse",[86,469,107],{"class":92},[86,471,180],{"class":100},[86,473,104],{"class":92},[86,475,107],{"class":92},[86,477,187],{"class":110},[86,479,107],{"class":92},[86,481,128],{"class":92},[86,483,484],{"class":131},"Dark",[86,486,135],{"class":92},[86,488,155],{"class":96},[86,490,140],{"class":92},[86,492,493,495,497,499,501,503,506,508,510,512,514,516,518,520,523,525,527],{"class":88,"line":143},[86,494,93],{"class":92},[86,496,155],{"class":96},[86,498,101],{"class":100},[86,500,104],{"class":92},[86,502,107],{"class":92},[86,504,505],{"class":110},"pui-tooltip pui-solid pui-theme",[86,507,107],{"class":92},[86,509,180],{"class":100},[86,511,104],{"class":92},[86,513,107],{"class":92},[86,515,187],{"class":110},[86,517,107],{"class":92},[86,519,128],{"class":92},[86,521,522],{"class":131},"Theme",[86,524,135],{"class":92},[86,526,155],{"class":96},[86,528,140],{"class":92},[86,530,531,533,535,537,539,541,544,546,548,550,552,554,556,558,561,563,565],{"class":88,"line":150},[86,532,93],{"class":92},[86,534,155],{"class":96},[86,536,101],{"class":100},[86,538,104],{"class":92},[86,540,107],{"class":92},[86,542,543],{"class":110},"pui-tooltip pui-soft pui-warn",[86,545,107],{"class":92},[86,547,180],{"class":100},[86,549,104],{"class":92},[86,551,107],{"class":92},[86,553,187],{"class":110},[86,555,107],{"class":92},[86,557,128],{"class":92},[86,559,560],{"class":131},"A warning",[86,562,135],{"class":92},[86,564,155],{"class":96},[86,566,140],{"class":92},[224,568,570],{"id":569},"on-any-element","On any element",[72,572,573],{},[76,574,576],{"className":78,"code":575,"language":80,"meta":81,"style":81},"\u003Cspan interestfor=\"definition\" tabindex=\"0\">CLS\u003C\u002Fspan>\n\u003Cdiv class=\"pui-tooltip\" id=\"definition\" popover=\"hint\">\n  Cumulative Layout Shift\n\u003C\u002Fdiv>\n",[83,577,578,618,656,661],{"__ignoreMap":81},[86,579,580,582,584,586,588,590,593,595,598,600,602,605,607,609,612,614,616],{"class":88,"line":89},[86,581,93],{"class":92},[86,583,86],{"class":96},[86,585,116],{"class":100},[86,587,104],{"class":92},[86,589,107],{"class":92},[86,591,592],{"class":110},"definition",[86,594,107],{"class":92},[86,596,597],{"class":100}," tabindex",[86,599,104],{"class":92},[86,601,107],{"class":92},[86,603,604],{"class":110},"0",[86,606,107],{"class":92},[86,608,128],{"class":92},[86,610,611],{"class":131},"CLS",[86,613,135],{"class":92},[86,615,86],{"class":96},[86,617,140],{"class":92},[86,619,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654],{"class":88,"line":143},[86,621,93],{"class":92},[86,623,155],{"class":96},[86,625,101],{"class":100},[86,627,104],{"class":92},[86,629,107],{"class":92},[86,631,164],{"class":110},[86,633,107],{"class":92},[86,635,169],{"class":100},[86,637,104],{"class":92},[86,639,107],{"class":92},[86,641,592],{"class":110},[86,643,107],{"class":92},[86,645,180],{"class":100},[86,647,104],{"class":92},[86,649,107],{"class":92},[86,651,187],{"class":110},[86,653,107],{"class":92},[86,655,140],{"class":92},[86,657,658],{"class":88,"line":150},[86,659,660],{"class":131},"  Cumulative Layout Shift\n",[86,662,663,665,667],{"class":88,"line":194},[86,664,135],{"class":92},[86,666,155],{"class":96},[86,668,140],{"class":92},[215,670,671],{},[208,672,673,674,677],{},"A tooltip has to be reachable by keyboard. If the trigger is not already focusable, give it ",[83,675,676],{},"tabindex=\"0\"",".",[224,679,681,682],{"id":680},"why-popoverhint","Why ",[83,683,684],{},"popover=\"hint\"",[208,686,687],{},"A hint can appear while a menu is open without closing it, which a regular popover cannot do. Where the browser does not know the value yet it behaves as a normal popover, so the tooltip still works.",[689,690,691],"style",{},"html pre.shiki code .s8qk9, html code.shiki .s8qk9{--shiki-default:var(--site-code-punct)}html pre.shiki code .sz5At, html code.shiki .sz5At{--shiki-default:var(--site-code-tag)}html pre.shiki code .sz6eq, html code.shiki .sz6eq{--shiki-default:var(--site-code-attr)}html pre.shiki code .s8AH5, html code.shiki .s8AH5{--shiki-default:var(--site-code-value)}html pre.shiki code .stV6K, html code.shiki .stV6K{--shiki-default:var(--site-code-text)}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":81,"searchDepth":143,"depth":143,"links":693},[694,695,696,697],{"id":226,"depth":143,"text":227},{"id":443,"depth":143,"text":444},{"id":569,"depth":143,"text":570},{"id":680,"depth":143,"text":698},"Why popover=\"hint\"",null,"Built on `interestfor` and `popover=\"hint\"`. It appears on hover, on keyboard focus, and on a long press — which is what makes it work on touch screens, unlike the old tooltip.","md",{},"\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftooltip",{"title":67,"description":700},"docs\u002Fv1\u002F04.components\u002F11.tooltip",[707,708],"component","tooltip","e9lN1ZC0plq3b4bU-iTv0XxNhFRcJQRBrLKDalqnL1o",[711],{"title":712,"path":14,"stem":713,"children":714,"page":744},"Docs","docs",[715],{"title":716,"path":717,"stem":718,"children":719,"page":744},"V1","\u002Fdocs\u002Fv1","docs\u002Fv1",[720,745,758,771,817],{"title":721,"path":722,"stem":723,"children":724,"page":744},"Getting Started","\u002Fdocs\u002Fv1\u002Fgetting-started","docs\u002Fv1\u002F01.getting-started",[725,729,733,737,740],{"title":726,"path":727,"stem":728},"Installation","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Finstallation","docs\u002Fv1\u002F01.getting-started\u002F01.installation",{"title":730,"path":731,"stem":732},"TypeScript","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftypescript","docs\u002Fv1\u002F01.getting-started\u002F02.typescript",{"title":734,"path":735,"stem":736},"Tailwind CSS","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Ftailwind-css","docs\u002Fv1\u002F01.getting-started\u002F03.tailwind-css",{"title":16,"path":738,"stem":739},"\u002Fdocs\u002Fv1\u002Fgetting-started\u002Fmigrating-from-0-x","docs\u002Fv1\u002F01.getting-started\u002F04.migrating-from-0-x",{"title":741,"path":742,"stem":743},"License","\u002Fdocs\u002Fv1\u002Fgetting-started\u002Flicense","docs\u002Fv1\u002F01.getting-started\u002F05.license",false,{"title":746,"path":747,"stem":748,"children":749,"page":744},"Customization","\u002Fdocs\u002Fv1\u002Fcustomization","docs\u002Fv1\u002F02.customization",[750,754],{"title":751,"path":752,"stem":753},"Dark Mode","\u002Fdocs\u002Fv1\u002Fcustomization\u002Fdark-mode","docs\u002Fv1\u002F02.customization\u002F01.dark-mode",{"title":755,"path":756,"stem":757},"Theme Color","\u002Fdocs\u002Fv1\u002Fcustomization\u002Ftheme-color","docs\u002Fv1\u002F02.customization\u002F02.theme-color",{"title":759,"path":760,"stem":761,"children":762,"page":744},"General","\u002Fdocs\u002Fv1\u002Fgeneral","docs\u002Fv1\u002F03.general",[763,767],{"title":764,"path":765,"stem":766},"Layout Group","\u002Fdocs\u002Fv1\u002Fgeneral\u002Flayout-group","docs\u002Fv1\u002F03.general\u002F01.layout-group",{"title":768,"path":769,"stem":770},"Float","\u002Fdocs\u002Fv1\u002Fgeneral\u002Ffloat","docs\u002Fv1\u002F03.general\u002F02.float",{"title":772,"path":773,"stem":774,"children":775,"page":744},"Components","\u002Fdocs\u002Fv1\u002Fcomponents","docs\u002Fv1\u002F04.components",[776,780,784,788,792,796,800,804,808,812,816],{"title":777,"path":778,"stem":779},"Accordion","\u002Fdocs\u002Fv1\u002Fcomponents\u002Faccordion","docs\u002Fv1\u002F04.components\u002F01.accordion",{"title":781,"path":782,"stem":783},"Badge","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbadge","docs\u002Fv1\u002F04.components\u002F02.badge",{"title":785,"path":786,"stem":787},"Button","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fbutton","docs\u002Fv1\u002F04.components\u002F03.button",{"title":789,"path":790,"stem":791},"Card","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fcard","docs\u002Fv1\u002F04.components\u002F04.card",{"title":793,"path":794,"stem":795},"Chip","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fchip","docs\u002Fv1\u002F04.components\u002F05.chip",{"title":797,"path":798,"stem":799},"Dropdown","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fdropdown","docs\u002Fv1\u002F04.components\u002F06.dropdown",{"title":801,"path":802,"stem":803},"List","\u002Fdocs\u002Fv1\u002Fcomponents\u002Flist","docs\u002Fv1\u002F04.components\u002F07.list",{"title":805,"path":806,"stem":807},"Modal","\u002Fdocs\u002Fv1\u002Fcomponents\u002Fmodal","docs\u002Fv1\u002F04.components\u002F08.modal",{"title":809,"path":810,"stem":811},"Table","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftable","docs\u002Fv1\u002F04.components\u002F09.table",{"title":813,"path":814,"stem":815},"Timeline","\u002Fdocs\u002Fv1\u002Fcomponents\u002Ftimeline","docs\u002Fv1\u002F04.components\u002F10.timeline",{"title":67,"path":703,"stem":705},{"title":818,"path":819,"stem":820,"children":821,"page":744},"Forms","\u002Fdocs\u002Fv1\u002Fforms","docs\u002Fv1\u002F05.forms",[822,826,830,834,838,842,846,850],{"title":823,"path":824,"stem":825},"Field Group","\u002Fdocs\u002Fv1\u002Fforms\u002Ffield-group","docs\u002Fv1\u002F05.forms\u002F01.field-group",{"title":827,"path":828,"stem":829},"Input","\u002Fdocs\u002Fv1\u002Fforms\u002Finput","docs\u002Fv1\u002F05.forms\u002F02.input",{"title":831,"path":832,"stem":833},"Input Group","\u002Fdocs\u002Fv1\u002Fforms\u002Finput-group","docs\u002Fv1\u002F05.forms\u002F03.input-group",{"title":835,"path":836,"stem":837},"Textarea","\u002Fdocs\u002Fv1\u002Fforms\u002Ftextarea","docs\u002Fv1\u002F05.forms\u002F04.textarea",{"title":839,"path":840,"stem":841},"Select","\u002Fdocs\u002Fv1\u002Fforms\u002Fselect","docs\u002Fv1\u002F05.forms\u002F05.select",{"title":843,"path":844,"stem":845},"Checkbox","\u002Fdocs\u002Fv1\u002Fforms\u002Fcheckbox","docs\u002Fv1\u002F05.forms\u002F06.checkbox",{"title":847,"path":848,"stem":849},"Radio","\u002Fdocs\u002Fv1\u002Fforms\u002Fradio","docs\u002Fv1\u002F05.forms\u002F07.radio",{"title":851,"path":852,"stem":853},"Switch","\u002Fdocs\u002Fv1\u002Fforms\u002Fswitch","docs\u002Fv1\u002F05.forms\u002F08.switch",1790354564878]