Popover

Popoverは、ユーザーのアクションに応じて一時的にコンテンツを表示するコンポーネントです。
アイコンやボタンなどの要素をトリガーとして使用し、追加情報や操作オプションを提供します。

プロパティ

Popoverは、以下のプロパティをサポートしています。

名前	型	デフォルト値	説明
`placement`	`string`	`top`	表示する位置を指定します。top, bottom, left, right のいずれかを指定できます。
`align`	`string`	`start`	吹き出しの位置を指定できます。start, center, end のいずれかを指定できます。
`show`	`boolean`	`false`	表示するかどうかを制御します。
`hideArrow`	`boolean`	`false`	矢印を非表示にするかどうかを指定します。
`offset`	`{x: number; y: number}`	`{x: 0, y: 0}`	表示位置を任意の方向にずらすための値です。
`duration`	`number`	`380`	表示・非表示の速さを指定できます。
`noFollow`	`boolean`	`false`	追従させるかどうかを制御できます。

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

Defaultでの表示です。

PlacementとAlignの組み合わせによる表示例です。

矢印を非表示にすることができます。

noFollow を指定すると、一度表示されたポップオーバーが対象要素に追従しなくなります。そのため、スクロールしてもポップオーバーの表示位置は固定され、対象要素と一緒に移動しません。

スクロール追従が不要なケースや、パフォーマンスを重視したい場合に活用できます。

Offsetを指定することで、表示位置を調整することができます。

DropdownMenuと組み合わせた例です。