Onboarding Hotspot Tooltip

<span class="tip-hotspot-tour">
  <button type="button" class="tip-hotspot-tour-beacon" aria-label="Tour: invite your team" aria-describedby="tip-hotspot-tour-tip"></button>
  <span class="tip-hotspot-tour-tip" id="tip-hotspot-tour-tip" role="tooltip">
    <small>Step 2 of 4</small>
    <b>Invite your team</b>
    Share the board and edit it together in real time.
    <span class="tip-hotspot-tour-dots" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
  </span>
</span>

.tip-hotspot-tour {
  --c: var(--tip-color, #3b82f6);
  font-size: var(--tip-size, 16px);
  position: relative;
  display: inline-flex;
  margin-left: 12em; /* room for the card in this preview */
}
.tip-hotspot-tour-beacon {
  position: relative;
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0 0.42em, color-mix(in srgb, var(--c) 22%, transparent) 0.46em 0.72em, transparent 0.76em);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* two rings, half a cycle apart */
.tip-hotspot-tour-beacon::before,
.tip-hotspot-tour-beacon::after {
  content: "";
  position: absolute;
  inset: 0.4em;
  border: 0.12em solid var(--c);
  border-radius: 50%;
  opacity: 0;
  animation: tip-hotspot-tour-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.tip-hotspot-tour-beacon::after { animation-delay: 1s; }
.tip-hotspot-tour:hover .tip-hotspot-tour-beacon { transform: scale(1.15); }
.tip-hotspot-tour-beacon:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.tip-hotspot-tour-tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.8em);
  z-index: 10;
  box-sizing: border-box;
  width: 14em;
  padding: 0.85em 1em 0.9em;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 14%, #0f172a);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.55);
  color: rgb(255 255 255 / 0.72);
  font: 400 0.8em/1.45 system-ui, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 100% 50%;
  transform: translate(0.6em, -50%) scale(0.94);
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.4s;
}
.tip-hotspot-tour-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0.65em;
  height: 0.65em;
  background: inherit;
  transform: translate(-50%, -50%) rotate(45deg);
}
.tip-hotspot-tour-tip small {
  display: block;
  color: color-mix(in srgb, var(--c) 45%, #fff);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tip-hotspot-tour-tip b {
  display: block;
  margin: 0.15em 0 0.2em;
  color: #fff;
  font-size: 1.1em;
}
.tip-hotspot-tour-dots {
  display: flex;
  gap: 0.35em;
  margin-top: 0.7em;
}
.tip-hotspot-tour-dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 1em;
  background: rgb(255 255 255 / 0.25);
  transition: width 0.4s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.3s ease;
}
.tip-hotspot-tour-dots i:nth-child(1) { background: color-mix(in srgb, var(--c) 70%, transparent); }
.tip-hotspot-tour:hover .tip-hotspot-tour-tip,
.tip-hotspot-tour:focus-within .tip-hotspot-tour-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%) scale(1);
}
/* the current step's dot stretches into a bar once the card is up */
.tip-hotspot-tour:hover .tip-hotspot-tour-dots i:nth-child(2),
.tip-hotspot-tour:focus-within .tip-hotspot-tour-dots i:nth-child(2) {
  width: 1.4em;
  background: var(--c);
  transition-delay: 0.25s;
}
@keyframes tip-hotspot-tour-ping {
  0% { opacity: 0.8; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.9); }
}

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

Similar tooltips