<div class="notice">⚠️ Your browser does not support the features used in this demo. Use Chrome 125+ to view it.</div>

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

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

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

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

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

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

[popovertarget] {
  display: none;
}

/* Style things up if Anchor Positioning is supported */
@supports (position-try: ---) {
  
  .notice {
    display: none;
  }
  
  .tooltip {
    position: relative; /* Sets containment */
  }

  [popovertarget] {
    display: inline;
    position: relative;
  }

  #tooltip-1 {
    [popovertarget] {
      anchor-name: --infotip-1;
    }

    [popover] {
      position-anchor: --infotip-1;
      top: anchor(--infotip-1 -15%);
      left: anchor(--infotip-1 110%);
    }
  }

  #tooltip-2 {
    [popovertarget] {
      anchor-name: --infotip-2;
    }

    [popover] {
      position-anchor: --infotip-2;
      top: anchor(--infotip-2 -15%);
      left: anchor(--infotip-2 110%);
    }
  }
}

@layer presentation {
  body {
    margin: 0;
  }
  
  .notice {
    background: wheat;
    color: saddlebrown;
    margin-block-end: 1rem;
    padding: 1rem;
    text-align: center;
    text-shadow: 0 1px 1px hsl(0 0 100%);
  }
  
  details {
    margin-block-end: 1.5rem;
    padding-inline-start: 1.5rem;
  }
  
  h2 {
    display: inline;
  }
  
  [popover] {
    background: #000;
    border: 0; /* Removes default border */
    border-radius: .35rem;
    color: #fff;
    margin: 0; /* Resets placement */
    padding: .35rem .5rem;
    position: absolute; /* Required */
  }
}