Popover Bloom

<div class="popover-bloom-stage">
  <button class="popover-bloom-btn" type="button" popovertarget="popoverBloomBox">Show the bubble</button>
  <div class="popover-bloom-box" id="popoverBloomBox" popover>The bubble blooms from its anchor</div>
</div>

.popover-bloom-stage,
.popover-bloom-stage *,
.popover-bloom-stage *::before,
.popover-bloom-stage *::after {
  box-sizing: border-box
}

.popover-bloom-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.popover-bloom-btn {
  padding: 10px 24px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  background: #6366f1;
  color: white;
  transition: background 0.2s, transform 0.1s;
}

.popover-bloom-btn:hover {
  background: #4f46e5;
}

.popover-bloom-btn:active {
  transform: scale(0.96);
}

/* La bulle est un popover : elle vit dans la couche supérieure (jamais coupée par un overflow: hidden,
   jamais sous un z-index voisin) et se place au-dessus du bouton qui l'ouvre grâce à l'ancrage CSS
   (position-area). Sans ancrage CSS, le script la place lui-même. */
.popover-bloom-box {
  position: fixed;
  inset: auto;
  margin: 0 0 10px;
  position-area: top;
  border: 0;
  overflow: visible;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  padding: 14px 22px;
  border-radius: 12px;
  font-family: sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
  opacity: 0;
  scale: 0.6;
  pointer-events: none;
  transform-origin: bottom center;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    display 0.4s allow-discrete,
    overlay 0.4s allow-discrete;
}

.popover-bloom-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #8b5cf6;
}

/* Ouverte : état d'arrivée. @starting-style donne l'état de départ de l'entrée (le popover
   passe de display: none à affiché, il n'a pas d'état « avant » sans cette règle). */
.popover-bloom-box:popover-open {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

/* Repli des navigateurs sans API Popover (règle séparée : un sélecteur :popover-open inconnu
   invaliderait toute la liste). */
.popover-bloom-box.popover-bloom-open {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
}

@starting-style {
  .popover-bloom-box:popover-open {
    opacity: 0;
    scale: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover-bloom-box {
    scale: 1;
    transition: opacity 0.15s ease, display 0.15s allow-discrete, overlay 0.15s allow-discrete;
  }

  @starting-style {
    .popover-bloom-box:popover-open {
      scale: 1;
    }
  }
}

(function() {
  /* Popover Bloom : l'attribut popovertarget ouvre et ferme la bulle sans script (Échap et clic
     à l'extérieur compris). Ce script ajoute aria-expanded, ancre chaque bulle à son bouton et
     prend le relais là où le navigateur ne connaît pas l'ancrage CSS ou l'API Popover. */
  var hasPopover = HTMLElement.prototype.hasOwnProperty('popover');
  var hasAnchor = !!(window.CSS && CSS.supports('position-area', 'top'));
  var count = 0;

  document.querySelectorAll('.popover-bloom-box').forEach(function(box) {
    var btn = box.id && document.querySelector('[popovertarget="' + box.id + '"]');
    if (!btn) return;
    btn.setAttribute('aria-expanded', 'false');

    function place() {
      var r = btn.getBoundingClientRect();
      box.style.left = (r.left + r.width / 2) + 'px';
      box.style.top = (r.top - 10) + 'px';
      box.style.translate = '-50% -100%';
      box.style.margin = '0';
    }

    if (!hasPopover) {
      /* Navigateur sans API Popover : bascule par classe, Échap ferme. */
      box.setAttribute('aria-hidden', 'true');
      var setOpen = function(open) {
        if (open) place();
        box.classList.toggle('popover-bloom-open', open);
        box.setAttribute('aria-hidden', String(!open));
        btn.setAttribute('aria-expanded', String(open));
      };
      btn.addEventListener('click', function() {
        setOpen(!box.classList.contains('popover-bloom-open'));
      });
      document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') setOpen(false);
      });
      return;
    }

    if (hasAnchor) {
      /* Nom d'ancre propre à chaque bulle : plusieurs bulles cohabitent dans la page. */
      var name = '--popover-bloom-' + (++count);
      btn.style.setProperty('anchor-name', name);
      box.style.setProperty('position-anchor', name);
    }

    box.addEventListener('beforetoggle', function(e) {
      if (e.newState === 'open' && !hasAnchor) place();
    });
    box.addEventListener('toggle', function(e) {
      btn.setAttribute('aria-expanded', String(e.newState === 'open'));
    });
    if (!hasAnchor) {
      var follow = function() {
        if (box.matches(':popover-open')) place();
      };
      window.addEventListener('scroll', follow, true);
      window.addEventListener('resize', follow);
    }
  });
})();