![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/CleanShot-2024-05-06-at-08.57.55%402x.png?resize=1024%2C633&ssl=1\")
We looked at the Popover API<\/a> and how it’s made it’s way across all browsers already just last week. One of the things I should<\/em> have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos<\/a>. I tried to adhere to the points made in there the best I could while making a classic tooltips experience, and we’ll do a bit of a review at the end where deviations happened.<\/p>\n\n\n This is actually my favorite part, as remember, this API can be used entirely<\/em> in HTML. That rules. Remember when we got One small weirdness though, it only works in HTML alone when a Then elsewhere in the DOM (the location of which doesn’t effect the core functionality):<\/p>\n\n\n Note I’m calling this an HTML<\/em> Tooltip, because what pops up isn’t text alone, which you might argue can be done with the The weird part here is the button smack in the middle of the paragraph. That’ll be a bit awkward styling-wise, but that’s surmountable. Mostly I don’t know if that’s “cool” screen-reader wise. So if someone know’s, feel free to chime in. If it’s not<\/em> cool, we might have to think about using a different element that is cool and relying on JavaScript to invoke the popup.<\/p>\n\n\n\n I say basic, because we cannot to tooltip-like styling in CSS for these yet. That is, we cannot position them next to the button that invoked them. We’ll get that, someday, when we can use the Anchor Positioning API<\/a>. <\/p>\n\n\n\n But we can do everything else that we want in terms of styling. <\/p>\n\n\n\n For one thing, let’s make the the middle-of-text look of the button look like something you can click. That’s something Melanie pointed out as a requirement. Rather than just being blue and underlined like a normal link, I’ll add an icon so it indicates slightly different behavior. We also need to un<\/em>do basic button styling so the button looks more like just some text. I usually have a class for that I call “text-like”. So:<\/p>\n\n\n That leads to a within-paragraph look like this:<\/p>\n\n\n Then if we apply some super basic styling to the A couple of notes here:<\/p>\n\n\n\n We need JavaScript here for two jobs:<\/p>\n\n\n\n These are both progressive enhancements, which is nice. So if either thing fails, the tooltip should still work. <\/p>\n\n\n\n For the delay, we’ll start a timer when the mouse cursor enters a button that opens a popup, if the timer finishes, we’ll open it. If the mouse cursor leaves before the timeout, we’ll clear that timeout:<\/p>\n\n\n I went for a library called Floating UI<\/a> to do this. I came across it the other day while using a library called Shepherd JS<\/a> for creating tours (example<\/a>). Shepherd uses it for positioning the steps of the tour, which are usually not far away from what an HTML tooltip might look like. <\/p>\n\n\n\n The Article Series<\/h3>\n <\/header>\n
\n
Starting With HTML<\/h2>\n\n\n\n
<details><\/code> where you could build an interactive open\/close disclosure widget thing with just HTML? That also rules, but this is even cooler. <\/p>\n\n\n\n<button><\/code> is the “invoker” of opening the popup. So in the case of a tooltip<\/em>, that button might come right in the middle of a sentence like.<\/p>\n\n\n<p<\/span>><\/span>\n This blog post was written by \n <button<\/span> popovertarget<\/span>=\"popover-chris-coyier\"<\/span>><\/span>\n Chris Coyier\n <\/button<\/span>><\/span>\n the genius.\n<\/p<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n<div<\/span> id<\/span>=\"popover-chris-coyier\"<\/span> popover<\/span> role<\/span>=\"tooltip\"<\/span>><\/span>\n <img<\/span> src<\/span>=\"\/images\/chris.jpg\"<\/span> alt<\/span>=\"A portrait of Chris Coyier in a tuxedo.\"<\/span> width<\/span>=\"100\"<\/span> height<\/span>=\"100\"<\/span>><\/span>\n <h4<\/span>><\/span>Chris Coyier<\/h4<\/span>><\/span>\n <p<\/span>><\/span>Handsome fella.<\/p<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\ntitle<\/code> attribute. These popovers are far more flexible, allowing you to style them and can contain anything HTML can. <\/p>\n\n\n\nThe Basic CSS<\/h2>\n\n\n\n
button<\/span>[popovertarget]<\/span>.text-like<\/span> {\n border<\/span>: 0<\/span>;\n background<\/span>: none;\n font<\/span>: inherit;\n display<\/span>: inline-block;\n\n color<\/span>: #1e88e5<\/span>;\n text-decoration-style<\/span>: dashed;\n text-decoration-line<\/span>: underline;\n text-decoration-color<\/span>: #42a5f5<\/span>;\n text-underline-offset<\/span>: 2px<\/span>;\n overflow<\/span>: visible;\n \n\n padding<\/span>: 0<\/span> 1.1rem<\/span> 0<\/span> 0<\/span>; \/* space for icon *\/<\/span>\n background-image<\/span>: url<\/span>(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 512 512' width='100' title='question-circle'%3E%3Cpath fill='%231e88e5' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z' \/%3E%3C\/svg%3E\"<\/span>);\n background-size<\/span>: 0.8em<\/span>;\n background-repeat<\/span>: no-repeat;\n background-position<\/span>: center right 1px<\/span>;\n\n &:focus,\n &:hover {\n text-decoration-color<\/span>: lightblue;\n text-decoration-style<\/span>: solid;\n }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-8.30.13%E2%80%AFAM.png?resize=1024%2C265&ssl=1\")
<\/figure>\n<\/div>\n\n\n[popover]<\/code> element itself, we can get a popover opening exactly in the middle of the page like this:<\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/05\/Screenshot-2024-05-06-at-8.33.46%E2%80%AFAM.png?resize=1024%2C921&ssl=1\")
<\/figure>\n\n\n\n\n
::backdrop<\/code> styling to style the rest of the page behind the popover. I feel like that may be a bit of an anti-pattern if using for tooltips. I don’t see any need to mess with the rest of the page when a tooltip is open.<\/li>\n\n\n\ndisplay: flex;<\/code> overrides the default display: none;<\/code> of the popup, making it visible all the time. Instead, you can use [popover]:popover-open { }<\/code> to apply it only when the popover is open. Or use an internal wrapper or whatever.<\/li>\n<\/ul>\n\n\n\nThe Functional JavaScript<\/h2>\n\n\n\n
\n
The Hover Delay<\/h3>\n\n\n\n
const<\/span> popoverButtons = document<\/span>.querySelectorAll(\n \"button[popovertarget]\"<\/span>\n);\n\npopoverButtons.forEach((button<\/span>) =><\/span> {\n let<\/span> timeout = 0<\/span>;\n button.addEventListener(\"mouseenter\"<\/span>, () => {\n const<\/span> target = button.getAttribute(\"popovertarget\"<\/span>);\n const<\/span> popover = document<\/span>.querySelector(\"#\"<\/span> + target);\n \/\/ delay opening<\/span>\n timeout = setTimeout(()<\/span> =><\/span> {\n popover.showPopover();\n }, 1500<\/span>);\n });\n\n button.addEventListener(\"mouseleave\"<\/span>, () => {\n clearTimeout(timeout);\n });\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe Positioning<\/h3>\n\n\n\n
.showPopover()<\/code> API is what opens the popup, so the trick is positioning it as it is being opened.<\/p>\n\n\n\n<\/span><\/span>popoverButtons.forEach((button<\/span>) =><\/span> {\n<\/span><\/span> let<\/span> timeout = 0<\/span>;\n<\/span><\/span> button.addEventListener(\"mouseenter\"<\/span>, () => {\n<\/span><\/span> const<\/span> target = button.getAttribute(\"popovertarget\"<\/span>);\n<\/span><\/span> const<\/span> popover = document<\/span>.querySelector(\"#\"<\/span> + target);\n<\/span><\/span> \/\/ delay opening<\/span>\n<\/span><\/span> timeout = setTimeout(()<\/span> =><\/span> {\n<\/span><\/span> popover.showPopover();\n<\/span><\/span> computePosition(button, popover, {\n<\/span><\/mark> placement<\/span>: \"top\"<\/span>,\n<\/span><\/mark> middleware<\/span>: [flip(), shift({ padding<\/span>: 5<\/span> }), offset(6<\/span>)]\n<\/span><\/mark> }).then(({ x, y }<\/span>) =><\/span> {\n<\/span><\/mark> Object<\/span>.assign(popover.style, {\n<\/span><\/mark> left<\/span>: `${x}<\/span>px`<\/span>,\n<\/span><\/mark> top<\/span>: `${y}<\/span>px`<\/span>\n<\/span><\/mark> });\n<\/span><\/mark> });\n<\/span><\/mark> }, 1500<\/span>);\n<\/span><\/span> });\n<\/span><\/span>\n<\/span><\/span> button.addEventListener(\"mouseleave\"<\/span>, () => {\n<\/span><\/span>