<div class="header-row">
  <h1>Recent purchases</h1>
<button id="toggle-btn-1" class="tooltip-toggle" aria-label="More info" aria-describedby="tooltip-1" popovertarget="tooltip-1">
  <span class="material-symbols-outlined">
    info
  </span>
</button>
    <div id="tooltip-1" role="tooltip" popover>
      <p role="none">
        The list shows your recent purchases in the last 28 days.
      </p>
  </div>
</div>
<ul>
  <li>Feet Up, My Ugly Clementine</li>
  <li>Happy Fxxxing Life, 5K HD</li>
  <li>Siasse Tschik, 5/8erl In Ehr'n</li>
  <li>Stay A Little Longer, Mira Lu Kovacs</li>
  <li>Divine Goldmine, Lou Asril</li>
  <li>Ikarus (I Feel a Change), Hearts Hearts</li>
  <li>Wolken, Oehl</li>
  <li>Bring mich auf Ideen, Garish</li>
</ul>
<hr>
<p>
  Find more awesome Austrian bands by listening to <a href="https://fm4.orf.at/">Radio FM4</a>.
</p>
<div class="not-supported">
  <p>You're <span>browser doesn't support</span> the Popover API with Anchor Positioning.</p>
</div>

* {
  font-family: sans-serif;
}

body {
  margin: 1rem;
}

.header-row {
  margin: 0.5rem 0;

  & h1 {
    display: inline;
    margin-right: 0.5rem;
    font-size: 1.875rem;
  }
}

button.tooltip-toggle {
  anchor-name: --toggle-btn;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: darkblue;
  border-radius: 50%;
  border: none;
  height: 2rem;
  width: 2rem;
  padding: 0;
  
  & span {
    scale: 1.4;
  }
  
  &:focus {
    outline: none;
  }
  
  &:focus-visible {
    background: darkblue;
    color: white;
/*     outline: 0.125rem solid currentColor;
    outline-offset: -0.125rem; */
  }
}

[role="tooltip"][popover] {
  position: absolute;
  position-anchor: --toggle-btn;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
  margin: 0.25rem 0;
  padding: 0.75rem;
  background: transparent;
  border: none;
  
  & p {
    position: relative;
    max-width: 16ch;
    font-size: 0.9rem;
    line-height: 1.4;
    background: #f9faff;
    border: 0.125rem solid darkblue;
    border-radius: 0.25rem;
    box-shadow: 5px 5px 10px -3px rgb(0 0 0 / 0.75);
    margin: 0;
    padding: 0.5rem;
  }
  
  & p::before {
    content: '';
    position: absolute;
    top: -0.75rem;
    left: calc(50% - 0.75rem);
    border-bottom: 0.75rem solid darkblue;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    width: 0;
    height: 0;
  }
}

ul li {
  margin-bottom: 0.5em;
}

a[href] {
  color: darkblue;
}

.not-supported {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 50%);
  height: 100vh;
  width: 100vw;
}
  
.not-supported p {
    border: 2px solid black;
    background: white;
    margin: 2rem;
    padding: 2rem;
}
    
.not-supported p span {
  font-weight: bold;
}

@supports (top: anchor(top)) {
  .not-supported {
    display: none;
  }
}