HTMLのpopoverの位置の指定方法

Question

実現したいこと

HTMLのbuttonをクリックしたときに、そのbuttonの傍にpopover属性を指定した要素を表示させたい。
表示/非表示はjavascriptで制御する。

[5/16 17:33 追記]
javascriptで制御したい理由は、buttonをクリックされたら実行されるjavascriptの処理結果に応じてpopoverを表示するかしないかを変えたい、あるいは表示内容を変更したいからです。

発生している問題・分からないこと

Javascriptを使用せずに自動的に表示させる場合には、buttonの傍に表示されます。
JavascriptのshowPopover()で表示されると離れた位置に表示されてしまいます。

popup位置の基準となる要素を何らかの方法で指定する必要があるのかがわかりません。
htmlの属性またはcssの記述が不足しているのでしょうか？

該当のソースコード

<div style="position: relative;">

    <div id="pop1" style="margin:0; inset:0; position-area:top;" popover >
        <div>あいうえお<br />かきく</div>
    </div>

    <button id="btnOK" style="margin:100px;" popovertarget="pop1">
        <span>意図した通りの要素の上になる</span>
    </button>

    <button id="btnFail" style="margin:100px;">
        <span>画面下になってしまう</span>
    </button>

    <script>
        document.querySelector("#btnFail").addEventListener("click", (ev) => {
            document.querySelector("#pop1").hidePopover();
            document.querySelector("#pop1").showPopover();
        });
    </script>
</div>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Popover anchor positioningで説明されているposition-areaを使用してるがjavascriptからは効果がない。

javascriptでの場合に対象とする要素が指定できていないのではと考えていますが、開発者ツールでみても違いが見つけられません。

補足

chrome 136
edge 136
(firefoxではまったく位置が合わない、safariでは試せていないが、今回の質問ではchromium系のみでよい)

得られた回答を参考に実現できたコード

[5/16 17:53 追記]
クリックされた(スクリプト処理後の)時点での対象のpopovertarget属性で判定されるようなので、非同期のawaitしてしまうと成功しませんでしたが、属性を書き換えてからclick()を呼び出すことで遅延させることができました。

    document.querySelector("#btnFail").addEventListener("click", async (ev) => {
        
        const btn = ev.currentTarget;

        if (btn.hasAttribute("popovertarget")) {
            return;
        }

        btn.innerText = "処理中";
        const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
        btn.innerText = result ? "合格" : "不合格";
        if (result) {
            btn.setAttribute("popovertarget", "pop1");
        }
        else {
            btn.setAttribute("popovertarget", "pop2");
        }

        btn.click();
        btn.removeAttribute("popovertarget");
    });

得られた回答を参考に実現できたコード 2

[5/16 18:20 追記]
HTMLとCSSでの関連は、styleにposition-anchorとposition-nameの値が一致する組み合わせをつければ良さそうなので、HTMLで書くと以下のように。

<div id="pop1"
    style="position-anchor: --testAnchor; margin:0; inset:0; position-area:top; background-color: green; color: white;"
    popover>
    <div>合格</div>
</div>
<button id="btnFail" style="anchor-name:--testAnchor; margin:100px;">
    <span>2</span>
</button> 

これをjavascriptで実現すると

document.querySelector("#btnFail").addEventListener("click", async (ev) => {

    const btn = ev.currentTarget;
    btn.innerText = "処理中";

    const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
    const pop = document.querySelector(result ? "#pop1" : "#pop2");

    const anchorName = "--testAnchor" + Date.now().toString();
    btn.style.anchorName = anchorName;
    pop.style.positionAnchor = anchorName;
    pop.showPopover();
});

とすることでshowPopover()でも任意に指定したボタンの傍に表示させることができるようになりました。

得られた回答を参考に実現できたコード 3

[5/16 18:55 追記]
showPopoverの引数で指定できる!!!

document.querySelector("#btnFail").addEventListener("click", async (ev) => {

    const btn = ev.currentTarget;
    btn.innerText = "処理中";

    const result = await new Promise((r) => setTimeout(r, 1000, (Math.random() < 0.5)));
    const pop = document.querySelector(result ? "#pop1" : "#pop2");
    pop.showPopover({ source: btn });
});

Answer 1

　仕様を見てみました。

---

　position-anchorが初期値のautoである時は、implicit anchor element が anchor element として扱われます。

https://drafts.csswg.org/css-anchor-position-1/#position-anchor

　この implicit anchor element は、ポップアップ表示処理の呼び出し元によって変わるようです。くわしくは、以下の24番をご覧ください。

https://html.spec.whatwg.org/multipage/popover.html#show-popover

---

　つまり、「popup位置の基準となる要素を何らかの方法で指定する必要があるのかがわかりません」の答えは、「必要あります。position-anchorを指定してください」になります。

参考：CSS Anchor Positioning 仕様の紹介

---

追記

　よくMDNを見ると英語版はいろいろ追加されているのですね……　showPopover()のオプションとか知りませんでした。こちらのやり方でもいいのだろうと思います。Chromeでも2025年2月の実装なので、対応環境に不安があると思いますが……

The browser creates an implicit anchor reference between the two, making it very convenient to position popovers relative to their controls using CSS anchor positioning.
HTMLElement: showPopover() method - Web APIs | MDN

（訳）ブラウザは2つのエレメント間に暗黙のアンカーを作成するため、CSSアンカーポジショニングを使用してポップオーバーの位置をコントロールするのに、とても便利です。

---

質問の追記に対して追記

buttonをクリックされたら実行されるjavascriptの処理結果に応じてpopoverを表示するかしないかを変えたい、あるいは表示内容を変更したいから

動機がこちらでしたら、popovertarget経由で開いて、beforetoggleイベントを拾って処理する、というのもアリだと思います。

Comments

[kasuta]

いろいろ情報ありがとうございます。
暗黙のアンカーという概念があることが判りました。クリックされたボタンが暗黙のアンカーになるのですね。

[kasuta]

position-anchorとposition-nameの書き換えすることで、showPopoverから表示できるようになりましたので、ベストアンサーに選ばせていただきました。

[Lhankor_Mhy]

質問の追記のコードを拝見しましたが、追記に書いた通り、普通にdocument.querySelector("#pop1").showPopover({source: ev.target});とした方が楽そうに思います。

ブラウザ対応を気にされているのであればすみません。

[kasuta]

showPopoverに引数があった。。。見た時にはなかったと思いたいですが、完全に見落としていたようです。
試したところ、popoverのstyleにposition-anchorが指定されている状態だと、引数指定してもダメになるようですね。

[kasuta]

2025/5/16現在、MDNの日本語版のshowPopoverのページでは引数の存在の記載がありませんが、英語版には記載されています。

[Lhankor_Mhy]

そうなんですよね、英語版にはいろいろ追記がされていて驚きました。まだ仕様が固まってないのでこれからもいろいろ変更されそうですよね。

Answer 2

そもそもpopoverをjsで制御する必要あります？

<div style="position: relative;">
    <div id="pop1"  style="margin:0; inset:0; position-area:top;" popover>
        <div>あいうえお<br />かきく</div>
    </div>
    <button style="margin:100px;" popovertarget="pop1">
        <span>1</span>
    </button>
    <button style="margin:100px;" popovertarget="pop1">
        <span>2</span>
    </button>
    <button id="btnFail" style="margin:100px;">
        <span>3</span>
    </button>
<script>
btnFail.setAttribute('popovertarget','pop1');
</script>
</div>

Comments

[kasuta]

javascriptで制御したいのは、javascriptの処理した結果に応じて表示を切り変えたいからです。

popovertarget属性を設定してやるとうまくいくことがヒントになりました。

[yambejp]

popover機能はまだ実装されてから歴史が浅いので正しく動作する想定でWEBに組み込むのは早計でしょうね・・・dialogタグもブラウザ間の差異がなくなるのに数年かかったイメージがあります

[kasuta]

clickの再呼び出しというちょっとよくないコードになってしまいますが解決できました。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。