CSS :popover-open playground

Explore :popover-open with a native popover. Toggle a positioning block that only applies while the popover is showing.

HTML

<button popovertarget="popover-card">
  Open popover
</button>

<div id="popover-card" popover>
  Native popover
</div>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<button popovertarget="popover-card">
  Open popover
</button>

<div class="bg-slate-900 border-2 border-solid border-[#94a3b8] text-slate-50 [&:popover-open]:inline-[200px] [&:popover-open]:block-[100px] [&:popover-open]:absolute [&:popover-open]:[inset:unset] [&:popover-open]:[inset-block-end:5px] [&:popover-open]:[inset-inline-end:5px] [&:popover-open]:m-0" id="popover-card" popover>
  Native popover
</div>

CSS

[popover] {
  background-color: #0f172a;
  border: 2px solid #94a3b8;
  color: #f8fafc;
}

[popover]:popover-open {
  inline-size: 200px;
  block-size: 100px;
  position: absolute;
  inset: unset;
  inset-block-end: 5px;
  inset-inline-end: 5px;
  margin: 0;
}

[popover] {
  background-color: #0f172a;
  border: 2px solid #94a3b8;
  color: #f8fafc;

  &:popover-open {
    inline-size: 200px;
    block-size: 100px;
    position: absolute;
    inset: unset;
    inset-block-end: 5px;
    inset-inline-end: 5px;
    margin: 0;
  }
}