Popover

使っている機能

popover

要素をポップオーバーにする属性。最前面に表示され、外側のクリックや Esc キーで閉じる

popovertarget

ボタンに付ける属性。押すと、指定したIDのポップオーバーを開閉する

popovertargetaction

ボタンの動作を show（開く）・hide（閉じる）・toggle（切り替え）から選ぶ

:popover-open

ポップオーバーが開いている間だけ一致する疑似クラス

CSS

/* 開いている間だけ一致する疑似クラス */
#basic-popover:popover-open {
	outline: 3px solid #3a5bd9;
}

HTML

<button type="button" popovertarget="basic-popover">Popoverを開く</button>
<div id="basic-popover" popover>
	<p>最前面に表示されます。外側のクリックや Esc キーで閉じます。</p>
	<button type="button" popovertarget="basic-popover" popovertargetaction="hide">閉じる</button>
</div>

使っている機能

@starting-style

表示された直後の状態を指定する。ここから通常の状態へ遷移するので、開くときのアニメーションになる

allow-discrete

display のように段階的に切り替わるプロパティも遷移させる。閉じるアニメーションの間、表示を残せる

overlay

閉じるアニメーションの間、最前面に残す。Chrome系のみ対応

CSS

/* 閉じているときの状態 */
#anim-popover {
	opacity: 0;
	scale: 0.9;
	/* display と overlay も遷移させ、閉じるアニメーションの間は表示を残す */
	transition:
		opacity 0.3s,
		scale 0.3s,
		display 0.3s allow-discrete,
		overlay 0.3s allow-discrete;
}

/* 開いているときの状態 */
#anim-popover:popover-open {
	opacity: 1;
	scale: 1;
}

/* 開いた直後の状態。ここから :popover-open の状態へ遷移する */
@starting-style {
	#anim-popover:popover-open {
		opacity: 0;
		scale: 0.9;
	}
}

HTML

<button type="button" popovertarget="anim-popover">アニメーション付きで開く</button>
<div id="anim-popover" popover>
	<p>開くときも閉じるときも、フェードと拡大縮小で切り替わります。</p>
	<button type="button" popovertarget="anim-popover" popovertargetaction="hide">閉じる</button>
</div>

使っている機能

popover="manual"

外側のクリックや Esc キーでは閉じない。ほかのポップオーバーを開いても閉じない

showPopover() / hidePopover()

JavaScriptからポップオーバーを開閉するメソッド

CSS

#toast-region {
	/* 標準の「画面中央」ではなく右下に表示する */
	inset: auto 16px 16px auto;
	margin: 0;
}

JavaScript

// popover="manual" は、外側のクリックや Esc では閉じない。開閉はJavaScriptで行う
if (!region.matches(':popover-open')) region.showPopover();

HTML

<div id="toast-region" popover="manual"></div>