回答編集履歴
6
質問の追記に対して追記
test
CHANGED
|
@@ -27,3 +27,11 @@
|
|
|
27
27
|
> [HTMLElement: showPopover() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover#parameters)
|
|
28
28
|
|
|
29
29
|
（訳）*ブラウザは2つのエレメント間に暗黙のアンカーを作成するため、CSSアンカーポジショニングを使用してポップオーバーの位置をコントロールするのに、とても便利です。*
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
### 質問の追記に対して追記
|
|
34
|
+
|
|
35
|
+
> buttonをクリックされたら実行されるjavascriptの処理結果に応じてpopoverを表示するかしないかを変えたい、あるいは表示内容を変更したいから
|
|
36
|
+
|
|
37
|
+
動機がこちらでしたら、popovertarget経由で開いて、beforetoggleイベントを拾って処理する、というのもアリだと思います。
|
5
追記
test
CHANGED
|
@@ -17,3 +17,13 @@
|
|
|
17
17
|
|
|
18
18
|
参考：[CSS Anchor Positioning 仕様の紹介](https://zenn.dev/d_kawaguchi/articles/css-anchor-positioning-294aa71a7f77fc#position-anchor-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)
|
|
19
19
|
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
### 追記
|
|
23
|
+
|
|
24
|
+
よくMDNを見ると英語版はいろいろ追加されているのですね…… `showPopover()`のオプションとか知りませんでした。こちらのやり方でもいいのだろうと思います。Chromeでも2025年2月の実装なので、対応環境に不安があると思いますが……
|
|
25
|
+
|
|
26
|
+
> 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.
|
|
27
|
+
> [HTMLElement: showPopover() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/showPopover#parameters)
|
|
28
|
+
|
|
29
|
+
（訳）*ブラウザは2つのエレメント間に暗黙のアンカーを作成するため、CSSアンカーポジショニングを使用してポップオーバーの位置をコントロールするのに、とても便利です。*
|
4
参考リンクの追加その2
test
CHANGED
|
@@ -15,3 +15,5 @@
|
|
|
15
15
|
|
|
16
16
|
つまり、「popup位置の基準となる要素を何らかの方法で指定する必要があるのかがわかりません」の答えは、「必要あります。`position-anchor`を指定してください」になります。
|
|
17
17
|
|
|
18
|
+
参考：[CSS Anchor Positioning 仕様の紹介](https://zenn.dev/d_kawaguchi/articles/css-anchor-positioning-294aa71a7f77fc#position-anchor-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)
|
|
19
|
+
|
3
参考リンクを追加
test
CHANGED
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
---
|
|
4
4
|
|
|
5
5
|
`position-anchor`が初期値の`auto`である時は、implicit anchor element が anchor element として扱われます。
|
|
6
|
+
|
|
7
|
+
https://drafts.csswg.org/css-anchor-position-1/#position-anchor
|
|
8
|
+
|
|
6
9
|
|
|
7
10
|
この implicit anchor element は、ポップアップ表示処理の呼び出し元によって変わるようです。くわしくは、以下の24番をご覧ください。
|
|
8
11
|
|
2
訂正その2
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
この implicit anchor element は、ポップアップ表示処理の呼び出し元によって変わるようです。くわしくは、以下の24番をご覧ください。
|
|
8
8
|
|
|
9
|
-
https://html.spec.whatwg.org/multipage/popover.html#h
|
|
9
|
+
https://html.spec.whatwg.org/multipage/popover.html#show-popover
|
|
10
10
|
|
|
11
11
|
---
|
|
12
12
|
|
1
訂正
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
`position-anchor`が初期値の`auto`である時は、implicit anchor element が anchor element として扱われます。
|
|
6
6
|
|
|
7
|
-
この implicit anchor element は、ポップアップ表示処理の呼び出し元によって変わるようです。くわしくは、以下の
|
|
7
|
+
この implicit anchor element は、ポップアップ表示処理の呼び出し元によって変わるようです。くわしくは、以下の24番をご覧ください。
|
|
8
8
|
|
|
9
9
|
https://html.spec.whatwg.org/multipage/popover.html#hide-popover-algorithm
|
|
10
10
|
|