<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>
</details>
body {
  margin: 0;
}

details {
  padding-inline-start: 1rem;
}

h2, button {
  display: inline;
}

.notice {
  background: wheat;
  color: saddlebrown;
  margin-block-end: 1rem;
  padding: 1rem;
  text-align: center;
  text-shadow: 0 1px 1px hsl(0 0 100%);
}

@supports (position-try: ---) {
  .notice {
    display: none;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.