Dropdown details

back edit

This demo uses Popover and <details> utilities from Primer CSS.

<details
  class="js-dropdown-details position-relative details-reset d-inline-block">
  <summary class="btn">Details</summary>
  <div class="Popover position-relative">
    <div class="position-absolute Popover-message Popover-message--top-left mt-2 text-left p-4 mx-auto Box box-shadow-large">
      Press escape to close this details.
    </div>
  </div>
</details>

<details
  class="js-dropdown-details position-relative details-reset d-inline-block">
  <summary class="btn">Second details</summary>
  <div class="Popover position-relative">
    <div class="position-absolute Popover-message Popover-message--top-left mt-2 text-left p-4 mx-auto Box box-shadow-large">
      Opening this details will close other currently open details tags.
    </div>
  </div>
</details>