10+ Popover API Examples

@import url('https://unpkg.com/normalize.css') layer(normalize);
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

@layer normalize, base, demo, popover;

@layer popover {
  .placeholder {
    width: var(--width);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    bottom: -1px;
    left: -1px;
    position: absolute;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  [popover] {
    width: 380px;
    max-width: calc(100% - 2rem);
    height: 120px;
    border-radius: 6px;
    margin: 0;
    inset: unset;
    padding: 0.25rem;
    opacity: 0;
    border-color: light-dark(hsl(0 0% 75%), hsl(0 0% 60%));
    border-width: 1px;
    background: canvasText;
    color: canvas;
    --shadow-color: 0 0% 0%;
    box-shadow: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.07),
      0px 1.7px 2.2px -0.4px hsl(var(--shadow-color) / 0.09),
      0px 3.2px 4.1px -0.7px hsl(var(--shadow-color) / 0.11),
      -0.1px 6.1px 7.8px -1.1px hsl(var(--shadow-color) / 0.13),
      -0.2px 11.2px 14.3px -1.5px hsl(var(--shadow-color) / 0.15);

    .popover__content {
      display: flex;
      flex-direction: column;
      gap: 0.25em;
      height: 100%;
      width: 100%;
      filter: blur(4px);
      opacity: 0;
      width: calc(380px - 0.5em - 2px);
      max-width: calc(100vw - 2.5rem - 2px);
    }

    &:popover-open {
      display: flex;
      flex-direction: column;
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 2rem;
      padding-left: 2rem;
      width: 100%;

      .primary,
      .secondary {
        display: flex;
        align-items: center;
      }

      .primary {
        gap: 0 0.25rem;
      }

      .primary button:first-of-type,
      .secondary button {
        background: #0000;
      }

      button {
        cursor: pointer;
        width: 32px;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        padding: 0;
        border: 0;
        border-radius: 6px;
        position: relative;

        &:not([aria-label='Submit'])::after {
          content: '';
          border-radius: 6px;
          position: absolute;
          inset: 0;
          background: red;
          background: color-mix(in oklch, canvasText, #0000 90%);
          opacity: 0;
        }

        &:is(:hover, :focus-visible)::after {
          opacity: 1;
        }

        &:is(:hover, :focus-visible) svg {
          opacity: 1;
        }

        svg {
          width: 16px;
          opacity: 0.5;
        }
      }
      button[aria-label='Submit'] {
        svg {
          opacity: 1;
        }

        &:is(:hover, :focus-visible) {
          background: color-mix(in oklch, canvasText, canvas 30%);
        }
      }
    }

    textarea {
      width: 100%;
      flex: 1;
      resize: none;
      outline-color: color-mix(in oklch, canvas, canvasText 2%);
      outline-color: #0000;
      font-size: 0.875rem;
      font-weight: 400;
      scrollbar-color: hsl(10 90% 50%) #0000;
      background: #0000;
      border-radius: 2px;
      caret-color: red;
      padding: 0.5em;
      border: 0;

      &::-moz-placeholder {
        white-space: nowrap;
        opacity: 0.8;
      }

      &:-ms-input-placeholder {
        white-space: nowrap;
        opacity: 0.8;
      }

      &::placeholder {
        white-space: nowrap;
        opacity: 0.8;
      }
    }
  }
}

@layer demo {
  .arrow {
    display: inline-block;
    opacity: 0.8;
    position: fixed;
    font-size: 0.875rem;
    font-family: 'Gloria Hallelujah', cursive;
    transition: opacity 0.26s ease-out;

    svg {
      color: hsl(0 0% 65%);
    }

    &.arrow--debug {
      top: 200px;
      right: 0px;
      translate: -50% 0;
      width: 60px;
      span {
        rotate: 12deg;
      }
      svg {
        rotate: 20deg;
        bottom: 130%;
        left: 0%;
        width: 100%;
        scale: -1 1;
      }
    }

    &.arrow--move {
      opacity: 0;
      top: 5.5rem;
      left: 50%;
      translate: calc((var(--snap-proximity) * -1px) + -150%) 0;
      width: 60px;
      span {
        rotate: -12deg;
      }
      svg {
        rotate: 270deg;
        top: 0%;
        left: 100%;
        width: 50%;
        scale: -1 1;
        translate: 180% -70%;
      }
    }

    &.arrow--instruction {
      top: 50%;
      left: 50%;
      translate: -130% -70%;

      svg {
        scale: 1 1;
        top: 130%;
        rotate: 25deg;
        left: 0%;
        width: 60%;
        translate: 120% 30%;
      }
    }

    span {
      display: inline-block;
      white-space: nowrap;
    }

    svg {
      position: absolute;
    }
  }
  [data-debug='true'] .arrow--move {
    opacity: 0.8;
  }
  :root {
    --width: 42px;
  }
  [data-dragging='true'] {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }
  [data-debug='true'] .target {
    opacity: 1;
  }
  .submit {
    background: canvasText;
    color: canvas;
  }
  .toggle {
    width: var(--width);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    color: canvas;
    background: canvasText;
    border-style: solid;
    border-color: color-mix(in oklch, canvasText, #0000 85%);
    border-width: 1px;
    --shadow-color: 0 0% 0%;
    box-shadow: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.07),
      0px 1.7px 2.2px -0.4px hsl(var(--shadow-color) / 0.09),
      0px 3.2px 4.1px -0.7px hsl(var(--shadow-color) / 0.11),
      -0.1px 6.1px 7.8px -1.1px hsl(var(--shadow-color) / 0.13),
      -0.2px 11.2px 14.3px -1.5px hsl(var(--shadow-color) / 0.15);

    svg {
      width: 20px;
      height: 20px;
    }
  }
  .targets {
    position: fixed;
    inset: 1.5rem;
    pointer-events: none;
  }
  .target {
    pointer-events: all;
    width: var(--width);
    aspect-ratio: 1;
    background: hsl(var(--hue, 10) 80% 50% / 0.2);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.26s ease-out;
    position: fixed;

    &[data-active='true'] {
      --hue: 150;
    }

    &::after {
      content: '';
      width: max(var(--width), var(--snap-proximity) * 2px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: hsl(var(--hue, 10) 80% 50% / 0.1);
      outline: 2px dashed hsl(var(--hue, 10) 80% 50% / 0.5);
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      pointer-events: none;
    }

    &.target--north {
      top: 1.5rem;
      left: 50%;
      translate: -50% 0%;
    }
    &.target--west {
      left: 1.5rem;
      top: 50%;
      translate: 0% -50%;
    }
    &.target--south-west {
      bottom: 1.5rem;
      left: 1.5rem;
    }
    &.target--south {
      bottom: 1.5rem;
      left: 50%;
      translate: -50% 0;
    }
    &.target--east {
      top: 50%;
      right: 1.5rem;
      translate: 0 -50%;
    }
    &.target--south-east {
      bottom: 1.5rem;
      right: 1.5rem;
    }
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    background: light-dark(#fff, #000);
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in hsl, canvasText, transparent 80%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        calc(var(--size) * 0.36) 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0%
        calc(var(--size) * 0.32) / var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

import { Pane } from 'https://esm.sh/[email protected]';
import gsap from 'https://esm.sh/[email protected]';
import { Draggable } from 'https://esm.sh/[email protected]/Draggable';
import { Flip } from 'https://esm.sh/[email protected]/Flip';

// use dynamic loading for the restricted InertiaPlugin
let InertiaPlugin;

const initApp = async () => {
  try {
    const module = await import('https://assets.codepen.io/16327/InertiaPlugin.min.js');
    InertiaPlugin = module.default || window.InertiaPlugin;
  } catch (e) {
    // fallback if esm import is blocked
    InertiaPlugin = window.InertiaPlugin;
  }

  gsap.registerPlugin(Draggable, InertiaPlugin, Flip);

  const config = {
    theme: 'system',
    proximity: 120,
    debug: false,
    duration: 0.35
  };

  const ctrl = new Pane({
    title: 'config',
    expanded: true
  });

  const update = () => {
    document.documentElement.dataset.theme = config.theme;
    document.documentElement.dataset.debug = config.debug;
    document.documentElement.style.setProperty('--snap-proximity', config.proximity);
  };

  const sync = event => {
    if (event.target.controller.view.labelElement.innerText === 'debug') {
      document.querySelector('.arrow--debug').style.opacity = 0;
    }
    if (!document.startViewTransition || event.target.controller.view.labelElement.innerText !== 'theme') {
      return update();
    }
    document.startViewTransition(() => update());
  };

  ctrl.addBinding(config, 'proximity', {
    min: 0,
    max: 300,
    step: 1,
    label: 'proximity'
  });

  ctrl.addBinding(config, 'duration', {
    min: 0.2,
    max: 5,
    step: 0.01,
    label: 'duration(s)'
  });

  ctrl.addBinding(config, 'debug', {
    label: 'debug'
  });

  ctrl.addBinding(config, 'theme', {
    label: 'theme',
    options: {
      System: 'system',
      Light: 'light',
      Dark: 'dark'
    }
  });

  ctrl.on('change', sync);
  update();

  const button = document.querySelector('[aria-label^="Start"]');
  const targets = document.querySelectorAll('.target');

  function getClosestPoint(target, maxDistance = Number.POSITIVE_INFINITY) {
    if (maxDistance !== Number.POSITIVE_INFINITY) {
      document.documentElement.style.setProperty('--snap-proximity', maxDistance);
    }
    let closest = null;
    let minDistance = Number.POSITIVE_INFINITY;

    const coordinates = Array.from(targets).map(el => {
      const rect = el.getBoundingClientRect();
      return {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2,
        element: el
      };
    });

    for (const coord of coordinates) {
      const dx = Math.min(window.innerWidth, Math.max(0, target.x)) - coord.x;
      const dy = Math.min(window.innerHeight, Math.max(0, target.y)) - coord.y;
      const distance = Math.hypot(dx, dy);
      if (distance < minDistance) {
        minDistance = distance;
        closest = coord;
      }
    }

    if (minDistance <= maxDistance) {
      return {
        coordinate: closest,
        distance: minDistance
      };
    }

    return null;
  }

  const RESISTANCE_PIXELS = 80;
  const DEFAULT_RESISTANCE = 0.75;
  const END_RESISTANCE = 0;
  gsap.set(button, {
    x: window.innerWidth * 0.5,
    y: window.innerHeight * 0.5,
    yPercent: -50,
    xPercent: -50
  });

  for (const target of targets) {
    Draggable.create(target, {
      inertia: false,
      type: 'x,y',
      onDrag: () => {
        document.querySelector('.arrow--move').style.opacity = 0;
      }
    });
  }

  Draggable.create(button, {
    inertia: true,
    allowContextMenu: true,
    type: 'x,y',
    dragResistance: DEFAULT_RESISTANCE,
    resistance: 1800,
    snap: {
      points: function (point) {
        const { isDragging, __unlocked, startX, startY } = this;
        const closestPoint = getClosestPoint(point, config.proximity);
        if (!isDragging && !__unlocked) {
          return { x: startX, y: startY };
        } else if (__unlocked && closestPoint) {
          for (const t of targets) t.dataset.active = false;
          closestPoint.coordinate.element.dataset.active = true;
          return closestPoint.coordinate;
        }
        return point;
      }
    },
    bounds: '.targets',
    onDragStart: function (event) {
      const bounds = this.target.getBoundingClientRect();
      const currentPoint = {
        x: bounds.left + bounds.width / 2,
        y: bounds.top + bounds.height / 2
      };

      this.__start = currentPoint;
      this.dragResistance = DEFAULT_RESISTANCE;
      this.__unlocked = false;
      document.documentElement.dataset.dragging = true;
    },
    onDrag: function (event) {
      const { startX, startY, x, y } = this;
      const distance = Math.hypot(x - startX, y - startY);
      const newResistance = gsap.utils.clamp(
        END_RESISTANCE,
        DEFAULT_RESISTANCE,
        gsap.utils.mapRange(0, RESISTANCE_PIXELS, DEFAULT_RESISTANCE, END_RESISTANCE)(Math.abs(distance))
      );

      if (!this.__unlocked) this.dragResistance = newResistance;
      if (!this.__unlocked && newResistance === END_RESISTANCE) {
        this.__unlocked = true;
        document.querySelector('.arrow--instruction').style.opacity = 0;
        for (const t of targets) t.dataset.active = false;
      }
    },
    onDragEnd: function () {
      this.dragResistance = DEFAULT_RESISTANCE;
      this.__unlocked = false;
    },
    onRelease: () => {
      document.documentElement.dataset.dragging = false;
    },
    onThrowComplete: function () {
      this.dragResistance = DEFAULT_RESISTANCE;
      this.__unlocked = false;
    }
  });

  const pop = document.querySelector('[popover]');
  let f;

  const closePopover = async () => {
    if (f) {
      f.pause();
      await f.reverse(f.time());
      pop.hidePopover();
    } else {
      let closerBounds;
      const pos = pop.getBoundingClientRect();
      const center = {
        x: pos.x + pos.width * 0.5,
        y: pos.y + pos.height * 0.5
      };

      const {
        x: buttonX,
        y: buttonY,
        width: buttonWidth,
        height: buttonHeight
      } = button.getBoundingClientRect();
      const closest = getClosestPoint({ x: center.x, y: center.y }, config.proximity);

      if (closest) {
        closerBounds = closest.coordinate.element.getBoundingClientRect();
        gsap.set(button, {
          opacity: 0,
          x: closest.coordinate.x,
          y: closest.coordinate.y
        });
      }

      const state = Flip.getState(
        [pop, '.placeholder', '.placeholder > svg', '[popover] .popover__content'],
        { nested: true, props: 'borderRadius, scale, opacity, filter, backgroundColor, color' }
      );

      gsap.set(pop, {
        width: buttonWidth,
        height: buttonHeight,
        top: closest ? closerBounds.top + closerBounds.height * 0.5 : buttonY + buttonHeight * 0.5,
        left: closest ? closerBounds.left + closerBounds.width * 0.5 : buttonX + buttonWidth * 0.5,
        opacity: 1,
        borderRadius: '21px',
        x: 0,
        y: 0,
        xPercent: -50,
        yPercent: -50,
        backgroundColor: getComputedStyle(document.body).color,
        color: getComputedStyle(document.body).backgroundColor
      });

      gsap.set('.placeholder > svg', {
        width: 20,
        height: 20,
        opacity: 1
      });

      gsap.set('[popover] .popover__content', {
        y: 0,
        opacity: 0,
        filter: 'blur(4px)'
      });

      await Flip.from(state, {
        duration: config.duration,
        nested: true,
        ease: 'power2.inOut'
      });

      gsap.set(button, { opacity: 1 });
      pop.hidePopover();
    }
  };

  let d;

  pop.addEventListener('toggle', async event => {
    if (event.newState === 'open') {
      const {
        x: buttonX,
        y: buttonY,
        width: buttonWidth,
        height: buttonHeight
      } = button.getBoundingClientRect();
      const center = {
        x: buttonX + buttonWidth * 0.5,
        y: buttonY + buttonHeight * 0.5
      };

      const {
        x: popX,
        y: popY,
        width: popWidth,
        height: popHeight
      } = pop.getBoundingClientRect();

      let vertical = 'center';
      if (center.y < popHeight * 0.5 + 24) vertical = 'bottom';
      if (center.y > window.innerHeight - (popHeight * 0.5 + 24)) vertical = 'top';
      let horizontal = 'center';
      if (center.x < popWidth * 0.5) horizontal = 'left';
      if (center.x > window.innerWidth - popWidth * 0.5) horizontal = 'right';

      gsap.set('[popovertarget]', {
        boxShadow: 'none'
      });

      gsap.set(pop, {
        width: buttonWidth,
        height: buttonHeight,
        top: buttonY,
        left: buttonX,
        opacity: 1,
        borderRadius: '21px'
      });

      const state = Flip.getState(
        [pop, '.placeholder', '.placeholder > svg', '[popover] .popover__content'],
        { nested: true, props: 'borderRadius, scale, opacity, filter, backgroundColor, color' }
      );

      const position = {
        left: center.x,
        top: center.y,
        xPercent: -50,
        yPercent: -50
      };

      if (horizontal === 'left') {
        position.right = 'unset';
        position.left = '1.5rem';
        position.xPercent = 0;
      }
      if (horizontal === 'right') {
        position.left = 'unset';
        position.right = '1.5rem';
        position.xPercent = 0;
      }
      if (vertical === 'bottom') {
        position.top = '1.5rem';
        position.bottom = 'unset';
        position.yPercent = 0;
      }
      if (vertical === 'top') {
        position.bottom = '1.5rem';
        position.top = 'unset';
        position.yPercent = 0;
      }

      gsap.set(pop, { clearProps: 'width,height' });
      gsap.set(pop, {
        ...position,
        opacity: 1,
        borderRadius: '6px',
        backgroundColor: getComputedStyle(document.body).backgroundColor,
        color: getComputedStyle(document.body).color
      });

      gsap.set('.placeholder > svg', {
        width: 16,
        height: 16,
        opacity: 0.5
      });

      gsap.set('[popover] .popover__content', {
        y: 0,
        opacity: 1,
        filter: 'blur(0px)',
        background: '#0000'
      });

      f = Flip.from(state, {
        duration: config.duration,
        nested: true,
        ease: 'power2.inOut'
      });

      window.addEventListener('keydown', closePopover);
      d = Draggable.create(pop, {
        dragClickables: false,
        inertia: true,
        allowContextMenu: true,
        type: 'x,y',
        bounds: '.targets',
        onDrag: () => {
          f = undefined;
          const pos = pop.getBoundingClientRect();
          const center = {
            x: pos.x + pos.width * 0.5,
            y: pos.y + pos.height * 0.5,
            xPercent: -50,
            yPercent: -50
          };

          gsap.set(button, {
            x: center.x,
            y: center.y,
            xPercent: -50,
            yPercent: -50
          });
        },
        onThrowUpdate: () => {
          f = undefined;
          const pos = pop.getBoundingClientRect();
          const center = {
            x: pos.x + pos.width * 0.5,
            y: pos.y + pos.height * 0.5
          };

          gsap.set(button, {
            x: center.x,
            y: center.y
          });
        }
      });
    } else {
      gsap.set([pop, '.placeholder > svg', '[popover] .popover__content'], {
        clearProps: 'all'
      });

      gsap.set(button, {
        clearProps: 'box-shadow',
        opacity: 1
      });

      window.removeEventListener('keydown', closePopover);
    }
  });

  document.querySelector('[aria-label="Minimize"]').addEventListener('click', closePopover);
};

initApp();