k8o

← Playgrounds一覧に戻る
HTMLデモ2

Popover API

JavaScriptなしでツールチップやドロップダウンメニューを実装できるAPIです。

基本的なポップオーバー

toggle・show・hideの3つのpopovertargetactionの違いを試せます。ESCキーや外側クリックでも閉じられます。

このポップオーバーはPopover APIによって表示されました。 ESCキーやこのコンテンツの外側のクリック、toggleまたはhideボタンで閉じられます。

ツールチップ・ドロップダウン

Popover APIを使わない従来型のツールチップとドロップダウンメニューの実装例です。

Tooltip

Dropdown Menu

このUIの実装はPopover APIを使っていません。