<details id="page" class="group-item">
  <summary>
    <h2><code>accent-color</code></h2>

    <span id="tooltip" class="tooltip">
      <!-- Popover Target and Anchor -->
      <button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">  
        Toggle
      </button>

      <!-- Popover and Anchor Target -->
      <div popover id="experimental-label" class="info-tip-content" role="tooltip">
        Experimental feature
      </div>
    </span>
  </summary>
  <p>Property description</p>
</details>

<details id="page" class="group-item">
  <summary>
    <h2><code>anchor-name</code></h2>

    <span id="tooltip" class="tooltip">
      <!-- Popover Target and Anchor -->
      <button class="info-tip-button" aria-labelledby="experimental-label" popovertarget="experimental-label">  
        Toggle
      </button>

      <!-- Popover and Anchor Target -->
      <div popover id="experimental-label" class="info-tip-content" role="tooltip">
        Experimental feature
      </div>
    </span>
  </summary>
  <p>Property description</p>
</details>

h2 {
  display: inline;
}

.tooltip {
  position: relative; /* Sets containment */

  /* Bail if Anchor Positioning is not supported */
  [popovertarget] {
    display: none;
  }

  /* Style things up if Anchor Positioning is supported */
  @supports (position-try: ---) {

    [popovertarget] {
      anchor-name: --tooltip;
      display: inline;
      position: relative;
    }

    [popover] {
      border: 0; /* Removes default border */
      margin: 0; /* Resets placement */
      position: absolute; /* Required */
      position-anchor: --tooltip;
      top: anchor(--tooltip -15%);
      left: anchor(--tooltip 110%);
    }
  }
}

@layer presentation {
  details {
    margin-block-end: 1.5rem;
  }
  
  [popover] {
    background: #000;
    border-radius: .35rem;
    color: #fff;
    padding: .35rem .5rem;
  }
}