JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="https://unpkg.com/invokers-polyfill@latest/invoker.min.js"></script>
<link
    rel="stylesheet"
    href="https://unpkg.com/@oddbird/[email protected]/dist/popover.css"
  />
  <script
    type="module"
    async
    src="https://unpkg.com/@oddbird/[email protected]/dist/popover.js"
  ></script>

<!-- <button invoketarget="my-dialog">Open Dialog!</button>
<dialog id="my-dialog">I'm a dialog!</dialog> -->
<button invoketarget="my-popover">Open Popover</button>
<!-- Effectively the same as popovertarget="my-popover" -->

<div id="my-popover" popover="auto">Hello world</div>


<!-- <button invoketarget="my-dialog2">Open Dialog!2</button>
<div id="my-dialog2" popover>I'm a dialog!2</div> -->


<script
  type="module"
  async
  src="https://unpkg.com/invokers-polyfill@latest/invoker.min.js"
></script>

CSS

/* [popover]:not(:popover-open):not(dialog[open]) {
    display: none;
} */

[popover]:popover-open {
    display: block;
}