<button style="anchor-name: --anchor-btn" popovertarget="my-tooltip">
  <p aria-hidden="true">?</p>
</button>

<div id="my-tooltip" class="tooltip" style="position-anchor: --anchor-btn" popover>
  <p>
    A wise old tree gave financial advice to passing squirrels, who
    diligently took notes using acorn-tipped pencils. Meanwhile, in a
    parallel universe, socks debated the merits of quantum physics with
    their arch-nemesis, the rebellious dryer sheets.
  </p>
</div>
.tooltip {
  /*  POSITIONING  */
  inset-area: bottom;
  margin-top: 0.5rem;
  max-width: 300px;

  /*  etc  */
  background: black;
  color: white;
  border: none;
  padding: 0 1rem;
  overflow: visible;
  border-radius: 1rem;
}

.tooltip::before {
  content: "";
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: black;
  border-width: 8px;
  margin-left: -8px;
}

button {
  font-size: 1rem;
  border-radius: 2rem;
  height: 2rem;
  width: 2rem;
  display: grid;
  border: 2px solid black;
  place-content: center;
  background: linear-gradient(345deg, #46e9d2, #a9ffa6, #d1ffb0);
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: system-ui, serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.