← 一覧へ

やってみよう「共有」ボタンを押してみてください

表示・レイアウトマイナー（知る人ぞ知る）

ポップオーバー

Popover

ボタンを押すと、そのすぐそばに矢印付きの小窓が出て、中のボタンを選べる。

別名ポップアップメニュー吹き出しメニューフローティングパネルPopper

どこで使われている？

よく見かける場所
iPadのアプリ、Googleドキュメント、管理画面の共有ボタン
使うとよい場面
ボタンのすぐそばに、少しの選択肢や設定を出したいとき
避けたい場面
狭いスマホの画面（ボトムシートやアクションシートにする）

補足短い説明文だけが出て、中を操作できないものは「ツールチップ」です。

似ているものとの違い

重ねて出す画面の違い（ボトムシート・アクションシート・モーダル・ポップオーバー）説明の見せ方の違い（ツールチップ・ポップオーバー・コーチマーク）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「ポップオーバー（Popover）」を実装してください。

動き：ボタンを押すと、そのボタンを指す小さな矢印付きのパネルをすぐ近くに表示する。パネルの中には複数のボタンやリンクを置ける。外側を押すと閉じる。

使う部品：popover 属性（Popover API）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトならpopover 属性（Popover API）
iPhoneアプリなら.popover(isPresented:)
AndroidアプリならPopup（メニューなら DropdownMenu）
FlutterならMenuAnchor（自由な中身なら popover パッケージ）
React Nativeならreact-native-popover-view

似ているもの・一緒に使うもの