ツールチップ(tooltip)をおしゃれにするCSSスニペット9選。バルーンだけじゃない！
フォーム項目の注釈説明をわかりやすくするツールチップ(tooltip)/ヘルプのCSSサンプルをまとめました。
趣向を凝らしたデザインが素敵なウェブサイト・ブログが増えています。ただし、サイトは利用者が快適に操作するためのものであり、ユーザビリティが悪いサイトや項目説明が不足しているサイトは使いにくいです。
サイトの使い方を補足説明する方法として「ツールチップ(tooltip)」が挙げられるでしょう。
本記事ではフォームの中でも「ツールチップ(tooltip)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルにバルーンがポップアップするタイプのツールチップ(tooltip)CSSデザイン例。
基本形のシンプルなバルーンツールチップ。Pure CSSで実装できる。
See the Pen
CSS Tooltip Magic by Envato Tuts+ (@tutsplus)
on CodePen.
最も基本的なツールチップと言えるでしょう。コントロールにマウスオーバーすることで、吹き出し型のバルーンが表示されます。バルーン自体は外側からフワッと現れるアニメーションをします。
バルーンが表示される方向で4パターンが用意されているのが良いですね。こだわらないならば、このようなシンプルなもので良いのではないかと思います。
基本形のシンプルなバルーンツールチップ その②。
See the Pen
CSS Directional Tooltips by Chris Bracco (@cbracco)
on CodePen.
こちらもシンプルな吹き出しバルーンタイプのツールチップです。
先ほどのサンプルと少しアニメーションが異なります。コントロールの内側から現れるような感じで、ヒョッコリとバルーンが現れるのが特徴的ですね。
コントロールとバルーンが一緒にアニメーション。柔らかいデザインのツールチップ。
See the Pen
CSS ToolTip Smooth animation by Omar Dsooky (@linux)
on CodePen.
こちらはマウスオーバーすると、バルーンが現れると同時にコントロールもアニメーションします。
優しい配色＆角丸の柔らかいデザインで、女性向けのサイトなどで合いそうです。
スマホでもＯＫ。タップでポップオーバーするツールチップ。
See the Pen
Bootstrap setting for tooltip and popover by Monkey Raptor (@monkeyraptor)
on CodePen.
TOOLTIP、POPOVERの２つのCSSセットサンプルです。
スマホの場合は「マウスオーバー」ができませんので、タップするとヒントが表示/非表示されるアニメーションになっています。
実はユーザビリティを考えると、「マウスオーバーでツールチップを表示する」という仕組みが良いとは限らない場合もあります。
利用者目線で見た場合、マウスオーバー(またはクリック・タップ)で利用方法のヒントが表示されることに気が付きにくいためです。スマホで操作している場合は特に顕著と言えるでしょう。また、ユーザが操作に慣れてくると、ツールチップ自体が邪魔に感じてしまうということも良くある話なのです。
そこで、ヒントが表示されることがわかりやすいようにデザインされたサンプルを次の項でご紹介したいと思います。
ヒントボタン・項目スライドでツールチップを表示する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スニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
