Steal this popover code

Popovers are pretty rad, as are dialogs, but animating them isn't easy.

1. the browser toggles display
2. the elements enter and exit the top layer
   (aka: the DOM penthouse)

Popovers are basically being appended or removed, and display is toggled between block and none.

Ew, how do we deal with that?

Steal this basic setup #

This next section is optimized for you to steal, but you can also just peep the Codepen and take it from there.

HTML #

Button that opens the popover:

<button popovertarget="my-tooltip">?</button>

The [popover]:

<p id="my-tooltip" popover>tip</p>

CSS #

This is a bit tricky. At least I think so.

[popover] {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: black;
  }

  &:popover-open {
    opacity: 1;

    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

CSS snippet explained #

This isn't a deep dive, find a good one from Una here, but is a 2m overview.

Transition setup #

1. sets any popover and their backdrops to 0 opacity
2. sets up a transition for that opacity
3. with a matching duration to opacity, display and overlay use a new keyword allow-discrete that signals these properties toggle any new values after the duration has run

[popover] {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      opacity .5s;
    opacity: 0;
  }
}

Display and entering/exiting the top-layer will now only change after opacity has finished fading

Popover showing #

1. sets any popover to opacity 1 when :popover-open
2. sets the backdrop to half opacity

[popover] {
  &:popover-open {
    opacity: 1;

    &::backdrop {
      opacity: 0.5;
    }
  }
}

Entry animation prep #

Since popovers enter the top layer, and we're using transitions, we need a way to tell the browser what styles to start the transition from. Enter @starting-style

1. When the popover is opened
2. Start the backdrop and popover with opacity 0

[popover] {
  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

This will then transition from the starting style, to the popover showing styles.

JS #

Nothing to see here.

Try it #