Skip to main content

Creating User-Friendly Hints in HTML with Popover=Hint Magic

 

Creating User-Friendly Hints in HTML with Popover=Hint Magic


How to Creating User-Friendly Hints in HTML with Popover Magic

Recently I was going through an article on how to build a web interface that feels effortless is your goal, but layered UI elements like tooltips can be a coding nightmare.

I love that clean, intuitive experience, but layering popovers without breaking the flow is a nightmare. The popover=hint attribute in HTML is my new best friend for this.

It allows you to open a UI like: tooltip or preview without closing other popovers. It’s a lightweight way to show context without hijacking the user’s focus.

Let’s See it in Action


Let’s have a look at a simple example to understand how it works under the hood.

HTML popover=hint example in action

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      [popover="auto"] {
        inset: unset;
        position: absolute;
        top: 100px;
        justify-self: anchor-center;
        margin: 0;
        text-align: center;
        padding: 8px;
      }
      [popover="hint"] {
        inset: unset;
        position: absolute;
        top: calc(anchor(bottom) + 5px);
        justify-self: anchor-center;
        margin: 0;
        padding: 8px;
        border-radius: 6px;
        background: #271717;
        color: whitesmoke;
        box-shadow: 1px 1px 3px #999;
        border: none;
      }
      /* Styling help para */
      .help-para {
        position: absolute;
        top: 16px;
        left: 16px;
        background: #eee;
        font-size: 0.8rem;
        line-height: 1.3;
        width: 50%;
        max-width: 600px;
        margin: 0;
        padding: 16px;
        box-shadow: 1px 1px 3px #999;
      }
      @media (max-width: 640px) {
        .help-para {
          width: auto;
          right: 16px;
        }
      }
      body {
        margin: 50px;
        padding: 10px;
        border: 2px solid lightblue;
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <section id="button-bar">
        <button
          popovertarget="submenu-1"
          popovertargetaction="toggle"
          id="menu-1"
        >
          Menu A
        </button>
        <button
          popovertarget="submenu-2"
          popovertargetaction="toggle"
          id="menu-2"
        >
          Menu B
        </button>
        <button
          popovertarget="submenu-3"
          popovertargetaction="toggle"
          id="menu-3"
        >
          Menu C
        </button>
      </section>
    </div>
    <div id="submenu-1" popover="auto">
      <button>Option A</button><br /><button>Option B</button>
    </div>
    <div id="submenu-2" popover="auto">
      <button>Option A</button><br /><button>Option B</button>
    </div>
    <div id="submenu-3" popover="auto">
      <button>Option A</button><br /><button>Option B</button>
    </div>
    <div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
    <div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
    <div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
    <script text="text/javascript">
      const tooltips = document.querySelectorAll(".tooltip");
      const btns = document.querySelectorAll("#button-bar button");
      function addEventListeners(i) {
        btns[i].addEventListener("mouseover", () => {
          tooltips[i].showPopover({ source: btns[i] });
        });
        btns[i].addEventListener("mouseout", () => {
          tooltips[i].hidePopover();
        });
        btns[i].addEventListener("focus", () => {
          tooltips[i].showPopover({ source: btns[i] });
        });
        btns[i].addEventListener("blur", () => {
          tooltips[i].hidePopover();
        });
      }
      for (let i = 0; i < btns.length; i++) {
        addEventListeners(i);
      }
    </script>
  </body>
</html>

That’s it. A context aware user interface with simple JavaScript, CSS and HTML. The hint pops up on hover, then vanishes when you move on.

But wait, there’s more!


Hint popovers, set with popover=hint, are different from popover=auto or popover=manual.

They’re light-dismissible, meaning a tap outside or ESC key sends them packing. They don’t close auto popovers, but they’ll shut down other hints to avoid clutter.

Here’s a quick comparison:

| Feature           | Popover=Auto | Popover=Hint | Popover=Manual |
|-------------------|--------------|--------------|----------------|
| Light Dismiss     | Yes          | Yes          | No             |
| Closes Others     | Hints, Autos | Other Hints  | Nothing        |
| Nesting           | Yes          | Special      | N/A            |

Nesting: The Tricky Part


Nesting hints can get wild. Most tooltips stand alone, but sometimes you’ve got a “rich” tooltip like GitHub’s profile previews with elements that have their own tooltips. Those shouldn’t close the parent tooltip.

Here’s the deal:

  • Two stacks exist: “auto stack” for popover=auto and “hint stack” for standalone hints.
  • A hint inside an auto popover joins the auto stack.
  • A hint inside another hint stays in the hint stack.
  • An auto popover can’t nest inside a hint.

I know it can be a little confusing. Here is the trick: think of it like layers. A hint inside an auto popover sticks with its parent, so hovering an unrelated hint won’t break the chain.

Final Takeaway


Today we had a look at very simple HTML magic which allows to buildcontext-sensitive UI elements.

Try this in your next project and share your experience in the comments below.

Thank you for joining. Let’s meet again with another cool HTML magic.


Comments

Post a Comment

Popular posts from this blog

Exploring Google’s New Gemini CLI: The Ultimate Open-Source Dev Tool

  Google quietly released a local AI agent that builds apps, debugs code, parses your repo, and fetches real-time data, right inside your terminal. And it’s completely free. This year, the most revolutionary developer tools I’ve used didn’t come with a splashy launch or billion-dollar hype. It came as a simple CLI: Gemini CLI, a terminal-based AI agent built on top of Google’s Gemini 2.5 Pro model . At first glance, it looks like a lightweight alternative to Claude Code. But after just 10 minutes of use, it became clear: this isn’t just a convenient utility. It’s a powerful local AI development assistant that can analyze, automate, and accelerate almost every part of your software workflow. And best of all? It’s fully open-source under the Apache 2.0 license It gives you up to 1,000 free requests per day It integrates with your local filesystem, IDE, and the web And it runs entirely in your terminal , no browser needed In this guide, I’ll show you what Gemini CLI is, how it works...
Post a Comment
Read more

Top 25 JavaScript Array Methods Every Developer Should Learn

  You wrote some code. You ran it. And then your array went from a list of users to an angry collection of undefined , NaN And more bugs than a summer camping trip. Staring at map , filter , and reduce like they were ancient scrolls written in Elvish. Copy-pasting from Stack Overflow like a caffeinated zombie. Wondering why the heck splice just murdered half my data. But here’s the truth: mastering arrays is non-negotiable. If you’re fumbling with arrays, you’re fumbling with everything . Web apps, APIs, UIs — they all depend on your ability to tame this glorious beast. So buckle up. I’m about to drop 25 methods that will make you look at arrays like a surgeon looks at a scalpel. Edited by me 1. map() - Because Loops Are for Cavemen You want to transform every item in an array? Don’t go forEach your way to hell. map It is concise, expressive, and doesn’t mutate your data. It’s like therapy for arrays. const names = [ 'alice' , 'bob' , 'charlie' ]; const u...
Post a Comment
Read more

6 Essential JavaScript Concepts Every Developer Should Understand

It’s the only language I’ve used where [] == ![] it's true and where you can, typeof null and somehow get 'object' . But despite all its quirks (and there are many), there are a few core concepts that make life with JS not just easier, but saner. This isn’t some computer science flex. These are practical concepts that, once you understand them, make you write better, cleaner, and less buggy code. 1. Hoisting  Before you rage at your variables being undefined , understand this: JS hoists variable and function declarations to the top of their scope. But —  and this is important  —  only the declarations , not the assignments. Why? Because JS reads it like: This is also why let and const behave differently — they’re hoisted too, but live in the “Temporal Dead Zone” until declared. 2. Closures Closures are like little memory vaults for your functions. They allow functions to remember variables from the scope they were created in, even after that scope has gone. Why care? T...
Post a Comment
Read more