ツールチップ(tooltip)をおしゃれにするCSSスニペット9選。バルーンだけじゃない！
フォーム項目の注釈説明をわかりやすくするツールチップ(tooltip)/ヘルプのCSSサンプルをまとめました。
趣向を凝らしたデザインが素敵なウェブサイト・ブログが増えています。ただし、サイトは利用者が快適に操作するためのものであり、ユーザビリティが悪いサイトや項目説明が不足しているサイトは使いにくいです。
サイトの使い方を補足説明する方法として「ツールチップ(tooltip)」が挙げられるでしょう。
本記事ではフォームの中でも「ツールチップ(tooltip)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルにバルーンがポップアップするタイプのツールチップ(tooltip)CSSデザイン例。
基本形のシンプルなバルーンツールチップ。Pure CSSで実装できる。
See the Pen
CSS Tooltip Magic by Envato Tuts+ (@tutsplus)
on CodePen.
ヒントボタン・項目スライドでツールチップを表示するCSSデザイン例。
項目上の「i」ボタンクリックでツールチップを表示する。
See the Pen
Pure CSS Tooltip by Cristina Silva (@cristina-silva)
on CodePen.
こちらはコントロールにツールチップが仕込んであるのではなく、コントロールの端に置いた「i(インフォメーション)」ボタン上にツールチップが仕込んであります。
このようなデザインの場合、「インフォメーションボタンをタップすればヒントが表示される」ということが、ユーザにも視覚的にわかりやすいと言えるでしょう。また、ヒントを見たくないユーザ(邪魔に感じているユーザ)はボタンを触らないため、ツールチップに邪魔されることもありません
項目に隣接する「？」ボタンクリックでツールチップを表示する。
See the Pen
Animated CSS Tooltip by Sasha (@sashatran)
on CodePen.
同じようにヒント用のコントロールが設置されているタイプのサンプルです。「i(インフォメーション)」ではなく「？(クエスチョン)」のマークでコントロールに隣接して置いてあるデザインです。
しかもバルーンが震えるアニメーションをするのでおしゃれですね。バルーンがユーザの入力作業を邪魔することなく、ヒントも美しく表示していて素晴らしいCSSサンプルなのではないかと思います。
項目にフォーカスすると下にツールチップ・ヒントが表示される。
See the Pen
:focus tooltip by Victor Pegado (@vpegado)
on CodePen.
こちらは入力欄にフォーカスしたときに下に注釈説明が表示されるタイプのツールチップデザインです。
縦幅が可変になってしまうことにデザイン上の問題がないならば、もっとも分かりやすい説明の表示方法ではないでしょうか。
フォーカスでコントロールが変化し、ツールチップ・ヒントが表示される。
See the Pen
Material Inputs by Jake Beresford (@jbeersfood)
on CodePen.
こちらも仕組みとしては同じですが、少し凝ったデザインになっています。フォーカス時に入力欄の下に説明が表示されるようになっています。シンプルなデザインですが軽快な動きのデザインでいいですね。
ただし、フォーカスアウトで説明が非表示になる処理が組み込まれていないのが少し残念です。必要な場合はカスタマイズが必要でしょう。
ヒントボックスを設置するタイプのツールチップCSSデザイン例。
スライドでたくさんの説明が表示できるヒントボックス。
See the Pen
Guided tour tooltip by Yoann (@yoannhel)
on CodePen.
こちらはヒントボックスタイプのツールチップで、NEXTボタンを押していくことでたくさんのヒントを表示できます。操作方法を手順・ステップで表示したい場合に向いていると言えるでしょう。
バルーンによるヒント表示は基本的に「項目に対する簡単な説明」をする場合に向いています。たくさんの説明文を表示してしまうと、読みにくいですし邪魔になりますのでユーザビリティーを下げる結果になりやすいです。
少し説明が長くなる手順・ステップの説明をしたい場合はヒントボックスタイプのツールチップを設置するのも1つの手です。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。