Progressively Enhanced Popover Toggletips

The CSS Anchor Positioning specification permits us to place components relative to an anchor, wherever they’re in our net web page. As I wrote not too long ago, one factor that notably excites me is with the ability to mix anchor positioning with the Popover API to point out and conceal components.

Anchor positioning isn’t very effectively supported but: in actual fact, it’s at present solely supported within the newest Chrome launch. Right here’s a code experiment with anchor-positioned toggletips (with textual content borrowed from Manifesto for a Humane Internet). In browsers that don’t help anchor positioning, easy anchor hyperlinks permit the person to navigate to the article references. However in supporting browsers, buttons exchange the anchor hyperlinks. These open popovers, which show the references relative to the place within the article.

See the Pen
Progressively enhanced popover toggletips by Michelle Barker (@michellebarker)
on CodePen.

We might additionally cover the record when anchor positioning is supported, however I feel it’s additionally extra user-friendly to incorporate references as an inventory as well as to inside the doc.

A small draw back is that this method requires a little bit of content material duplication. Moreover, I’m making use of the :has pseudo-class to place the little arrows connected to the bubbles when the popover is open, by styling the ::earlier than pseudo-element of the button.

[popovertarget]:has(+ :popover-open) {
  place: relative;
  background: yellow;

  &::earlier than {
    --clip: polygon(50% 0, 100% 100%, 0 100%);
    content material: '';
    place: absolute;
    high: 100%;
    left: 50%;
    width: 1rem;
    top: 1rem;
    background: lavender;
    remodel: translateX(-50%);
    -webkit-clip-path: var(--clip);
    clip-path: var(--clip);
  }
}

This implies I want to incorporate the component with the popover attribute adjoining to the popover set off (the button) within the HTML.

The rationale I’m doing it this fashion and never making the arrow a part of the bubble itself is as a result of its place really adjustments relying on the out there house. I’m making use of the position-try- properties and at-rule, which permit our popover to flip to the left or proper, so that it’s going to all the time be seen when activated, and never overflow the viewport. Fairly cool!

[popover] {
  position-try-options: --pos-left, --pos-right;
  position-try-order: most-width;
}

@position-try --pos-left {
  left: anchor(var(--anchor) -150%);
}

@position-try --pos-right {
  proper: anchor(var(--anchor) 150%);
  left: auto;
}

I’m utilizing customized properties for the anchor title right here as a result of every toggletip has its personal anchor which must be referred to, however we wish all the opposite positioning values to be the identical. This will make for barely complicated studying, nevertheless, notably because the anchor title is a dashed ident, that means it seems to be similar to a customized property.

[popover] {
  --anchor: --ref_1;

  position-anchor: var(--anchor);
  high: anchor(var(--anchor) 150%);
  left: anchor(var(--anchor) -150%);

  &#ref_2 {
    --anchor: --ref_2;
  }

  &#ref_3 {
    --anchor: --ref_3;
  }
}

[popovertarget="ref_1"] {
  anchor-name: --ref_1;
}

[popovertarget="ref_2"] {
  anchor-name: --ref_2;
}

[popovertarget="ref_3"] {
  anchor-name: --ref_3;
}

I hesitate to name these tooltips, as to my thoughts a tooltip is usually one thing that seems on hover, to elucidate the factor you’re about to click on on. These might extra precisely be described as “toggletips”, which give supplementary data, as described in Heydon Pickering’s Inclusive Parts.

Anchor positioning with pseudo-elements

As a bonus, I’ve refactored the above demo to work in a approach that’s a bit of bit extra user-friendly. It makes use of pseudo components on the buttons with the popovertarget attribute in an effort to enhance their hit space, and moreover permits us a bit extra management over the positioning of the popovers, as they are going to be positioned relative to the pseudo-element.

Beforehand we had been utilizing proportion values to place the popover barely offset from the anchor. Sadly lengths reminiscent of pixels or rems, or calc() capabilities usually are not permitted.

[popover] {
  /* Not allowed :( */
  high: anchor(var(--anchor) calc(100% + 1rem));
  left: anchor(var(--anchor) -1rem);

  /* Use proportion as a substitute */
  high: anchor(var(--anchor) 150%);
  left: anchor(var(--anchor) -150%);
}

However through the use of a pseudo-element, we will align the popover to that as a substitute:

[popovertarget] {
  &::after {
    content material: '';
    place: absolute;
    inset: -1rem;
  }
}

[popover] {
  high: anchor(var(--anchor) backside);
  left: anchor(var(--anchor) left);
}

Right here’s the total demo, with the pseudo-elements outlined in purple:

See the Pen
Anchor positioning popovers with pseudo components by Michelle Barker (@michellebarker)
on CodePen.