Anchored definition popovers

Styling the button

Let's first style the button to not look like a button. It will be included in running text, so it needs to look like a link, not a button.

We style all buttons with a popovertarget that are direct children of paragraphs, and with the exact same html as before we get the following.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

Styling the popover

Let's customize the popover a bit by setting a max-width, adding some padding and a border-radius, replacing the thick black border with a box-shadow, and use a friendlier sans-serif font.

The popover looks nicer, but it is still opened at the center of the page. The browser sets a bunch of rules for the popover by default, like the black border that we removed in the previous step. The position of the popover is controlled by the browser using the rules margin: auto; and inset: 0px, which centers it in the screen.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

[popover] {
  max-width: 400px;
  padding: 0.5em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;

  h2,
  p {
    margin: 0;
    font-family: sans-serif;
  }
}

By setting the margin to 0 vertically and 1em horizontally and unseting the inset (isn't that a fun combination of words) the popover is now placed in the top right corner.

Now it's time to position the popover relative to the button.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

[popover] {
  margin: 0 1em;
  inset: unset;
  max-width: 400px;
  padding: 0.5em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;

  h2,
  p {
    margin: 0;
    font-family: sans-serif;
  }
}

This is the really interesting part, by using the new rules bottom: achor(top) and justify-self: anchor-center we place the popover centered above the button.

There is a subtle but very neat rule for popovertarget that there is an implicit anchor association between the popover and the button. This means we don't have to be explicit about which anchor we want the popover to use, since there is an implicit one already. All we have to do is tell it where to place itself relative to the anchor element. That is very useful for our css, as it can be reused for multiple popovers.

CSS takes care of a bunch of edge cases for us, like when the popup is at the edge of the screen. Clicking on the word edge in the box above opens the popover, but it does not go outside the viewport, even though it is quite wide and at the edge of the screen.

This popover opens in the right place, but it can still look a bit nicer. I want it to look like a speech bubble, with a little downward notch pointing to the button that was clicked. That is also easy to add, using the psudo element ::before.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

[popover] {
  margin: 0 1em;
  inset: unset;
  bottom: anchor(top);
  justify-self: anchor-center;
  max-width: 400px;
  padding: 0.5em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;

  h2,
  p {
    margin: 0;
    font-family: sans-serif;
  }
}

The first two lines inside the ::before pseudo-element control the position, just like for the popover. The rest of the rules are there just to style it to look like a downard notch. It needs position: fixed or else it cannot be positioned or have a size. It's made white and given a box-shadow and then rotated 45 degrees so that it looks like a downward arrow. The way it is placed and the shadow is offset makes it blend in with the rest of the popover. I also changed the popover to be 0.5em above the anchor element, to make room for the notch.

One very neat effect is that this is also attached to the top center of the button, so while the popover itself will adjust its position to not go outside the screen, this one will stay stuck centered above the button. This is noticable when opening a popover close to the edge of the screen, where the popover is nudged sideways but the notch stays put, relative to the button. The result is an asymetric speech-bubble effect.

So far so good, but it's a bit jarring that it just appears and disappears, it would be nice with a subtle little animation.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

[popover] {
  margin: 0 1em;
  inset: unset;
  bottom: calc(anchor(top) + 0.5em);
  justify-self: anchor-center;
  max-width: 400px;
  padding: 0.5em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;

  &::before {
    bottom: anchor(top);
    justify-self: anchor-center;

    transform: rotate(45deg);
    position: fixed;
    width: 1em;
    height: 1em;
    background-color: white;
    box-shadow: 0.5em 0.5em 1em 0 rgba(0, 0, 0, 0.1);
    content: '';
  }

  h2,
  p {
    margin: 0;
    font-family: sans-serif;
  }
}

Animating it

Let's first try to hide the popup slowly when you click away from it.

Ok, a lot going on here. The first thing I do is to change the bottom rules of both the [popover] and the ::before pseudo-element to add the value of a css custom preperty called --translate. This way we can move the two elements up and down by changing the value of this property. The second argument of var(), the 0em, is the default value if the property isn't set. The property is only set when :not(:popover-open), that is, when the popover is closed. Then it is also made transparent using the opacity: 0 rule.

Then it's time to animate these changes, by setting a bunch of transition rules. transition-property is set to bottom (so that it moves up), opacity (so it fades out) and then display and overlay. The last two are interesting, and are why there is also a transition-behavior: allow-discrete there. This rule makes it possible to transition properties that don't have intermediate values. opacity can easily transition between 0 and 1 but how can display: block transition to display: none? The answer is that it can't, but allow-discrete instead makes it wait for the transition-duration until it changes, therefore the popover is visible until it has completely faded out.

We also want the down arrow to fade out, so it inherits the entire transition property. Strangely it does not need to inherit the opacity, but it does neet to explicitly get the correct bottom property.

The last thing to do now is to make a neat animation when it appears.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

[popover] {
  margin: 0 1em;
  inset: unset;
  bottom: calc(anchor(top) + 0.5em + var(--translate, 0em));
  justify-self: anchor-center;
  max-width: 400px;
  padding: 0.5em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;

  transition-property: bottom, opacity, display, overlay;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;

  &:not(:popover-open) {
    --translate: 0 1em;
    opacity: 0;
  }

  &::before {
    transition: inherit;

    bottom: calc(anchor(top) + var(--translate, 0em));
    justify-self: anchor-center;

    transform: rotate(45deg);
    position: fixed;
    width: 1em;
    height: 1em;
    background-color: white;
    box-shadow: 0.5em 0.5em 1em 0 rgba(0, 0, 0, 0.1);
    content: '';
  }

  h2,
  p {
    margin: 0;
    font-family: sans-serif;
  }
}

The @starting-style rule makes it possible to animate how an element appears. It defines what the element looks like just before it exists or is visible. Since we have transition rules they make it possible to transition our element into existance.

p > button[popovertarget] {
  all: unset;
  cursor: help;
  text-decoration: underline dashed;
}

[popover] {
  margin: 0 1em;
  inset: unset;
  bottom: calc(anchor(top) + 0.5em + var(--translate, 0em));
  justify-self: anchor-center;
  max-width: 400px;
  padding: 0.5em;
  border: none;
  box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;

  transition-property: bottom, opacity, display, overlay;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  transition-behavior: allow-discrete;

  &:not(:popover-open) {
    --translate: 0 1em;
    opacity: 0;
  }

  &::before {
    transition: inherit;

    bottom: calc(anchor(top) + var(--translate, 0em));
    justify-self: anchor-center;

    transform: rotate(45deg);
    position: fixed;
    width: 1em;
    height: 1em;
    background-color: white;
    box-shadow: 0.5em 0.5em 1em 0 rgba(0, 0, 0, 0.1);
    content: '';
  }

  h2,
  p {
    margin: 0;
    font-family: sans-serif;
  }

  @starting-style {
    --translate: -1em;
    opacity: 0;

    &::before {
      --translate: -1em
    }
  }
}