CSS-only tooltip using popover & anchor

#webdev #css #ux #html

To improve performance in a project I'm working on, I'm refactoring some components and replacing them with more native implementations.
In this post, I will start with a component that we use widely: the tooltip. I will use two relatively new features: the Popover API and Anchor CSS.

Popover API and Anchor CSS:

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled declaratively using HTML attributes or JavaScript.

The anchor() CSS function can be used within an anchor-positioned element's inset property values, returning a length value relative to the position of the edges of its associated anchor element.

🤔

Our baseline

Let's start with a basic info icon that will serve as our tooltip opener,
Nothing fancy here:

<button class="info-icon"></button>

The Popover API

We're adding an information div, marking it as a popover and passing a unique id to it. popovertarget property is added to the icon, excepting the popover id string.
note that popovertarget can be only of type button or input:

<button popovertarget="info" class="info-icon"></button>
<div id="info" popover>Lorem ipsum dolor sit amet</div>

Clicking the info button toggles the popover visibility, and clicking outside closes it. This initial implementation results in a more modal-style element.

Let's go one step further, and position the tooltip using the anchor CSS.

Adding anchor CSS

The anchor CSS is still experimental but getting adopted quickly by all major browsers:

All major browser engines are working on implementing this spec.
Can be enabled via the #enable-experimental-web-platform-features flag in chrome://flags

We'll add the anchor property to our info div. It expects a string id of the element we're anchoring to:

<button id="info-opener"
        popovertarget="info"
        class="info-icon"></button>
<div id="info" popover="auto" anchor="info-opener">
  Lorem ipsum dolor sit amet
</div>

Placing the tooltip

To position the target tooltip beside the anchor (info icon), we'll use the anchor() CSS:

<button id="info-opener"
        popovertarget="info"
        class="info-icon"></button>
<div id="info"
     popover="auto"
     anchor="info-opener" class="info-tooltip left">
  Lorem ipsum dolor sit amet
</div>

.left {
  padding-left: .75rem;
  clip-path: polygon(
    100% 0%,
    100% 100%,
    5px 100%,
    5px calc(50% + 5px),
    0% 50%,
    5px calc(50% - 5px),
    5px 0%
  );
}

.info-tooltip[popover] {
  background: #007bff;
  color: #fff;
}

.info-tooltip[popover] {
  left: calc(anchor(right) + 2px);
  top: anchor(center);
  transform: translateY(-50%);
}

which results in:

Breaking it down

The .info-tooltip class styles the element and adds anchor-like functionality.

What does this anchoring do? It attaches the tooltip to a logical grid cell—one of a 3 by 3 grid representing our info element.

The left property aligns the tooltip's left side with the info element's right side, adding 2px of space. The top property centers the tooltip vertically to the tooltip's midpoint.

Some extras

The popover property accepts two values:

auto: This is the default behavior. Click anywhere on the page to
toggle: the popover visibility.
manual: Toggles the visibility only by clicking the opener element.

Another property that can be utilized from the opener element is popoverTargetAction:

toggle: This is the default action— as the name implies, it toggles the visibility.
show: Only triggers showing the popover; you can’t close it.
hide: Only hides the popover.

Conclusion

We briefly covered two relatively new features: the Popover API and the CSS anchor() feature. Both are extremely powerful and combining them can enable amazing, JavaScript-free functionality.

As mentioned, both are relatively new. The Popover API has wide browser support and can be safely used. The anchor() feature, on the other hand, is still experimental and is not yet recommended for use in production environments.