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

#ui #html #tutorial #webdev

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.