ツールチップ & メニュー

ツールチップ & メニューに分類されるWeb表現技法10件。方向別ツールチップ、アクションメニュー、ユーザーメニュー、リッチポップオーバーなど。ライブデモとコピーできるコード付き。

ボタンの上下左右に矢印付きの吹き出しが現れるCSSツールチップ集。hoverとfocusどちらでも表示され、待機中は1つが自動でそっとプレビューされます。

カード右上の⋮ボタンから編集・複製・共有・削除をまとめた操作メニューを展開します。矢印キーでの移動、Escや外側クリックでの終了にも対応した基本のドロップダウンです。

アバターをクリックすると、プロフィールや設定・テーマ切り替え・ログアウトをまとめたアカウントメニューが上向きに展開します。テーマはクリックのたびに切り替わります。

文中の語句にカーソルを合わせてしばらく待つと、写真・見出し・説明・CTAを備えた大きめのカードがふわりと現れます。クリックで固定表示もできます。

「⋮」ボタンをクリックすると矢印付きのメニューが開くポップオーバー。外側クリックやEscで閉じ、矢印キーで項目を選べます。

作品エリア内でカーソルの動きに滑らかに追従するラベルが現れるツールチップ。項目ごとに文言が変わり、フォーカス時は静的なヒントで補います。

コメント欄の名前やアバターにカーソルを合わせると、肩書き・統計・フォローボタンを備えたプロフィールカードがふわっと現れます。

主アクションボタンと▼ボタンを分離したスプリットボタンです。▼側でエクスポート形式を選ぶと既定の形式が切り替わり、主ボタンはワンクリックでその形式のまま実行します。

枠内を右クリックするとカーソル位置にコピーや削除などの操作メニューが開きます。画面端では自動的に位置を反転させ、はみ出さずに収まるようにしています。

「ファイル」メニューからサブメニューが右へ多階層に展開します。ホバーでの自然な開閉に加え、矢印キーの→←での階層移動やEscでの一括終了にも対応しています。