More than 1 year has passed since last update.

JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】

Last updated at 2022-09-27Posted at 2022-09-27

chrome://flags を開きExperimental Web Platform featuresをEnabledにして再起動(Chrome110から普通に使えるようになります)

ダイアログを表示する

<div id="ダイアログ1" popup>ダイアログの内容</div>
<button popuptoggletarget="ダイアログ1">ダイアログを開閉する</button>

See the Pen Untitled by John Doe (@04) on CodePen.

<div id="ツールチップ1" popup>ツールチップの内容</div>
<button popuphovertarget="ツールチップ1">ツールチップを表示する</button>

See the Pen ツールチップ by John Doe (@04) on CodePen.

通知やトーストも表示できます。