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

<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>
.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: ---) {
    
    .notice {
      display: none;
    }

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

    [popover] {
      border: 0; /* Removes default border */
      margin: 0; /* Resets placement */
      position: absolute; /* Required */
  }
}
  
@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%);
  }
  
  h2 {
    display: inline;
  }
  
  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.