<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>
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 {
  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 */
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.