Popovers in HTML

Shrutarshi Basu had remarked in a thread on the 32bit.cafe forum that there was no way to pop up notes without using JavaScript. I had thought of using the <dialog> element, but there’s another way: the popover attribute.

It wasn’t widely supported until 2024, and support on mobile browsers still seems inconsistent. And please forget about IE11.

However, I don’t think I’ve ever used it myself. Not on this website. Certainly not on the job.

So, let’s try it now. It might be a fun way to do footnotes. 1 I could use this as an alternative to tucking away notes and tangents inside a details element.

Here’s another one! Unfortunately, you have to use a button instead of the anchor element. 2

Now, what happens if we do a really big popover? go big

Popovers with lots of text probably work best if you fiddle with the default style. Here’s how I do it.

popover {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    max-width: 80%;
    max-height: 80%;
    margin: auto;
    border: var(--border);
    padding: 1rem;
    overflow: auto;
    color: var(--color);
    background-color: var(--accent);
    box-shadow: var(--shadow);
}

You should bear in mind that if you want to dismiss popovers with the ESC key, you probably want to explicitly set the popover’s auto state.

And I should probably create m4 macros for popovers and popover buttons. I might not foul up as often that way.

The nice thing is that as long as I put my dialog elements at the end of the text, they work just fine even in lynx, except that the browser will gripe about the buttons not being contained in a form element. There might be a way around that, too. But it’s time I went to bed. My poor wife probably thinks I’m up playing video games on a work night like an irresponsible bachelor.

Still, it might be fun to use what I’ve learned to implement a nav menu. Then again, it’s one thing to have hamburgers on the menu, and another entirely to use hamburger menus.