Tailwindcssのポップオーバーを画面中央に表示させたい

Tailwindcss に搭載されている機能のポップオーバーの位置を中央に表示させたかったときのメモです。

Tailwindcssにもポップオーバーがあった

結果表示画面が出来てきて、意味も表示させたいけれど、そこまでは見栄えとしてテーブルに表示するのはよくないなぁ。

そうだ、Bootstrapにあったポップオーバーをボタンが押された時に真ん中に表示させるのはどうかな？

と思って、Tailwindcssにもあるかな？と思ったらちゃんとポップオーバーがありました。

https://tailwindcss.com/docs/hover-focus-and-other-states#starting-style

これを使ってやってみよう！

左上に貼りついたまま動かない

早速書いてみたけれど、左上に貼りついたまま動かないよ・・・

下手すると、ポップ自体消えてしまうしどうすればいいの・・・

<div class="flex justify-center items-center h-screen">
  <table>
  ...
  </table>
  <div popover id="my-popover" class="starting:open:opacity-0 h-screen overflow-auto object-center h-screen rounded bg-blue-500 text-white">
    テスト
  <div>
</div>

<div class="flex justify-center items-center h-screen">
  <table>
  ...
  </table>
  <div popover id="my-popover" class="starting:open:opacity-0 h-screen overflow-auto object-center h-screen rounded bg-blue-500 text-white">
    テスト
  <div>
</div>

ちゃんと justify-center items-center も入れてるのになぁ？

原因は位置を指定していない＋クラスが追加されていない

DevToolでよく見たら、ポップオーバーの position が fixed になっていた。

ポップオーバー自体に位置を指定するコードがなく、justify-center items-centerは無視されるので、書いていても意味なし。

親の<div>を外して、<table>の下に下記のコードを記述した。

<table>
...
</table>
<div popover id="my-popover"
  class="starting:open:opacity-0 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
         bg-white text-black p-6 rounded-xl shadow-xl">テスト
</div>

<table>
...
</table>
<div popover id="my-popover"
  class="starting:open:opacity-0 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
         bg-white text-black p-6 rounded-xl shadow-xl">テスト
</div>

おー理想的！

まだ全体をお見せ出来ないのが残念だけれど、ちゃんと中央に表示されました！