JWS Docs / HTML

HTML tags, elements & attributes

No matter whether you're new to writing HTML since going through our tutorials or experienced old hands at it like us. There's often something new in HTML to learn about, be it newly released or finally fully supported by all major browsers. So here we plan to introduce you to new HTML tags, elements or attributes that have caught our attention or we've had lots of requests about.

Popover

Popover components are certainly not a new thing as you can find them being used all over the web for example:

• Tooltips / Toggletips
• Datepickers / Calendar widgets
• Menus
• Product card previews
• Teaching UI (e.g. to point out parts of your interface when it is first shown)

But in the past using them would mean the need to write and add JavaScript to your website, often resulting in large files that can slow down your webpage. Plus any added JavaScript files will require extra managing such as updating for security reasons.

Luckily the need for building Popovers this way is now over with the set of declarative HTML APIs which are now supported in all major browsers, we can allow the browser to do all the heavy work for us by applying the popover attribute to an element.

See the latest popover browser support and features at CanIuse:.

Popover - global attribute

The popover global attribute can be added to any HTML element allowing it to take on the behaviours of a popover, whilst the role of the element will be unchanged as the popover attribute has no default role.

To build a basic popover requires the following:

•  A popover attribute on the element containing the popover.
•  An id on the element containing the popover.
•  A popovertarget with the value of the popover's id on the element that opens the popover.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

By design a popover element is hidden by display: none until opened via an invoking/control element e.g. <button>.

Once opened a popover element will appear on the top layer of the page above all other elements and won't be influenced by it's parent elements position or overflow styling.

The element will however be able to take on the popover attribute's particular set of behaviours such as:

• Promotion to the top layer - Popovers will appear on a separate layer above the rest of the page, without the need to use z-index.
• Light-dismiss functionality - Clicking outside of the popover area will close the popover and return focus.
• Default focus management - Opening the popover makes the next tab stop inside the popover.
• Accessible keyboard bindings - Hitting the esc key will close the popover and return focus.
• Accessible component bindings - Connecting a popover element to a popover trigger semantically.

Auto vs. Manual Popover

The popover attribute also currently allows two values "auto" (default) or "manual" each with slightly different characteristics:

• popover=auto: light dismisses; when it opens, it force-closes other auto popovers and hints (except its ancestors); it or its ancestor would usually receive focus. It can be dismissed via light-dismiss (selecting outside the popover area) or a close button.
• popover=manual: explicit dismiss; when it opens, it does not force close any other element type or close via light-dismiss. It must be closed via a timer or an explicit close action e.g. close button. This type of popover is ideal for elements that appear/disappear but shouldn't affect anything else on the webpage.

Styling popovers

You can style the popover element with CSS as you would any other HTML element, though it will by default have a 2px border and be positioned in the centre of the user interface (users screen). As well as the actual element it's also possible to style the ::backdrop to the popover, this is the layer directly beneath the top layer popover, but above all other layers on the page. To help shift the users focus onto the popover element you could style the ::backdrop by either adding a semi-transparent colour or by using an effect such as blurring out the background.

If you've played with the popover demo above you can see that we added a thicker blue border to our popover solid 4px rgb(26, 85, 118), and gave the ::backdrop a reduced opacity turquoise colour rgba(0 128 128 / 30%).

Further Information on Popover

This article has covered the basics of this newly adopted attribute but if you would like to learn more check out these great resources below.

https://html.spec.whatwg.org/dev/popover.html#the-popover-attribute.

https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Una Kravets - Chrome for Developers blog article https://developer.chrome.com/blog/introducing-popover-api

Hidde de Vries - blog articles https://hidde.blog/dialog-modal-popover-differences/ & https://hidde.blog/popover-semantics/

New to popover

Hint

A third popover type has arrived as of January 2025 in Chrome browsers.

This new popover value will allow us to have a unrelated hint popover open without force-hiding (closing) an already open auto popover. Enabling us to create UI features so much easier, such as - tooltips within a popover info card, or a user to view a tooltip, hint or similar whilst they have a popover menu open, as until now these features were only achievable by using manual popovers and a whole lot of JavaScript.

In theory when actioned the hint popover can only force-hide/close other hint popovers when its opened, this should allow it to be open at the same time as a auto popover, without forcing the auto to close.

But in reality this only works like this if your hint is a hover triggered event rather than a clickable event element such as a button, or is nested inside the open auto popover so it becomes part of the stack, otherwise the click event will action the light-dismiss of the auto popover and force-hide/close it.

So for now we still need to add some JavaScript event listeners to provide mouseenter and mouseleave events on hover, though this will be a lighter bit of script than was previously needed with the manual popovers.

Interestfor

What if we could dispense with the need for JavaScript altogether and open our hint popover on hover with just HTML & CSS instead? Well hopefully soon there will be a new interestfor (previously called interesttarget) attribute on the block that will let us do this.

The hope is that this attribute can be added to any hover element such as a <a>, and the hint popover would be invoked on hover/focus so the user can read the hint info/tip before clicking through.

Unfortunately at the moment this is only underdevelopment, so currently we still need to rely on a bit of JavaScript with event listeners for mouseenter and mouseleave events.

If you want try out interest invokers you can but only by turning on the experimental web platform features in Chrome Canary, though we will keep you updated as to when this feature will be Baseline available.

Further Resources for Hint & Interestfor

We realise we haven't yet covered JavaScript in any detail, but if you would like further information about popover="hint" and interestfor attributes along with JavaScript code examples then check out these resources

Una Kravets - blog article https://una.im/popover-hint/

Keith Cirkel & Mason Freed - Chrome for Developers blog article https://developer.chrome.com/blog/popover-hint

If you would like to understand the JavaScript used in the above links samples you can always copy and paste the JavaScript snippet into Copilot or Openai and ask it to explain the snippet for you, which it is very capable of doing.