Comments on: Using the Popover API for HTML Tooltips

By: John

John — Wed, 23 Apr 2025 03:53:51 +0000

I got kind of close, a minute later. HTML is like this:

<div class='menu-wrapper'>
  <button popovertarget='my-menu'>Open</button>
  <div id='my-menu' popover='auto'>...</div>
</div>

And CSS is like this:

.menu-wrapper:has(:popover-open) [popovertarget]{
  color: red;
}

The problem I have now is that :popover-open doesn't seem to be specific to one popover....if one popover is open, it seems to make :popover-open true across the board. For example, I have multiple menu items that can open submenus. I obviously only want a highlight on the one submenu trigger that is open. But with the above CSS, it is styling all submenu triggers. I can't find a satisfactory way to limit it. Anyway, i'll stop troubleshooting here...

By: John

John — Wed, 23 Apr 2025 03:36:09 +0000

Is it possible to style the trigger for the popover? So that when the popover element is open (:popover-open = true), the element with the popovertarget attribute is styled? I'm making a nested dropdown menu, and when a first-level menu option is opened to reveal a nested menu, I want the first-level option to retain a "hover/highlighted" styling even when the mouse moves into the nested menu.

By: pd

pd — Tue, 25 Feb 2025 03:16:44 +0000

How they missed the simple use of this sort of functionality as the forever-missing native tooltip, complete with anchor positioning to prevent the popover content displaying off screen, ON HOVER, is beyond me.

Perhaps it could have been popovertargetaction=”hover”.

Please, please oh please could that be added to the API in future.

Why is the intelligentsia behind web standards development so ignorant of what already has been built?

“If we build it, they will …. pretend it doesn’t need standardising into native HTML”.

Tabs being probably the ultimate example. “Oh, they can just build them with a bit of existing elements and CSS … except, that also needs awareness/attention to a11y which they usually don’t / can’t do … oh, and the moment developers can’t do something they want in ultr light native HTML they will start looking towards increasingly bloated frameworks …ah, nevermind, so be it!”.

By: Jurgen

Jurgen — Thu, 31 Oct 2024 09:27:46 +0000

Can someone help me with this issue regarding the popover?

https://codepen.io/92b420/details/yLmjpdR

By: Ryan

Ryan — Tue, 11 Jun 2024 18:37:03 +0000

Thank you for this article, fun to play w/ the new Popover API

You should add the following CSS for the popover content:

#tooltip {
  /* Float on top of the UI */
  position: absolute;

/* Avoid layout interference */
  width: max-content;
  top: 0;
  left: 0;
}

This CSS is mentioned on the Floating UI: https://floating-ui.com/docs/computePosition

If you don’t add this, the FloatingUI position values assigned may not be correct (default User Agent styles will most likely have the tooltip with a position:fixed; and margin: auto; which will affect positioning)

By: Armagan

Armagan — Tue, 14 May 2024 07:27:47 +0000

Thanks so much for sharing great insights on the article, it is super useful. I recently worked on a tooltip component and we used popover as well! Just sharing a codepen https://codepen.io/Arm-Ersoz/pen/GRaRomQ in case it is helpful for anyone, that has the animation delay with CSS and tiny adjustment to make sure tooltips are also visible to keyboard users!

By: Una

Una — Thu, 09 May 2024 14:40:11 +0000

It sounds like a lot of what you’re describing here would be “interesttrigger”-ed popovers. This is something the OpenUI CG has been trying to sort out. It would enable: hover/focus to trigger the popover and the ability to have this trigger be a link (not just a button). As you can imagine, this is quite a complex task accessibility-wise, so there are a lot of discussions currently going on to resolve open questions. Also! Anchor positioning is almost here (it’s in Chrome Beta, coming to stable next week, and is at least being prototypes in Firefox).

interesttarget explainer: https://open-ui.org/components/interest-invokers.explainer/

By: eugene

eugene — Thu, 09 May 2024 13:15:40 +0000

Here is one that also makes use of popover, popovertarget without js, and [popover]::backdrop to animate the popover

https://codepen.io/32teeth/pen/YzMgqQx