Glassmorphism Tooltip

<span class="tip-glass">
  <button type="button" aria-label="Play trailer" aria-describedby="tip-glass-tip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg></button>
  <span class="tip-glass-tip" id="tip-glass-tip" role="tooltip">Watch the trailer · 2:14</span>
</span>

.tip-glass {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  width: 17em;
  height: 9.5em;
  padding-top: 2.2em;
  overflow: hidden;
  border-radius: 1em;
  isolation: isolate;
}
/* the thumbnail: soft color blobs standing in for a video frame */
.tip-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 30%, color-mix(in srgb, var(--c) 90%, #fff) 0 18%, transparent 42%),
    radial-gradient(circle at 78% 25%, #f472b6 0 14%, transparent 40%),
    radial-gradient(circle at 60% 85%, #fbbf24 0 12%, transparent 40%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 60%, #1e1b4b), #312e81);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tip-glass:hover::before,
.tip-glass:focus-within::before { transform: scale(1.08); }
.tip-glass button {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  padding: 0 0 0 0.2em;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 0.5em 1.2em -0.3em rgb(0 0 0 / 0.4);
  color: var(--c);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.tip-glass:hover button { transform: scale(1.08); }
.tip-glass svg {
  width: 1.3em;
  height: 1.3em;
}
.tip-glass button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.tip-glass-tip {
  position: absolute;
  /* the button's top sits 0.4em above the middle; 0.6em of gap on top of that, in this box's 0.8em font */
  bottom: calc(50% + 1.25em);
  left: 50%;
  z-index: 10;
  padding: 0.5em 0.9em;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 2em;
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(0.7em) saturate(1.6);
  backdrop-filter: blur(0.7em) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 0.5em 1.2em -0.4em rgb(0 0 0 / 0.35);
  color: #fff;
  font: 600 0.8em/1.3 system-ui, sans-serif;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 0.5em) scale(0.94);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
}
.tip-glass:hover .tip-glass-tip,
.tip-glass:focus-within .tip-glass-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .tip-glass, .tip-glass *, .tip-glass::before, .tip-glass::after, .tip-glass *::before, .tip-glass *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar tooltips