CSSでツールチップを作る方法を徹底解説！表示位置のカスタマイズとフェードイン効果まで
Webサイトをデザインしていると、ユーザーがページ上の要素にマウスをホバー（重ね）したときに、追加情報を表示したいと考えることがあります。
たとえば、よくある質問（FAQ）ページをデザインする場合、ページ内に登場する専門用語について、ホバー時に補足説明を表示させたいことがあるでしょう。この情報は、ユーザーがその用語にマウスを合わせたときだけ表示されるのが理想的です。
このように、要素にマウスを合わせたときに情報を表示する仕組みは「ツールチップ」と呼ばれます。本記事では、具体的なコード例をもとに、CSSでツールチップを作成する方法を解説します。読み終える頃には、CSSでのツールチップ作成をしっかりマスターできているはずです。
CSSツールチップとは
ツールチップは、Webページ上の要素に関する情報を追加表示するために使われます。サイトの作者が内容を明確にしたいときや、文章中の単語に定義を加えたいときなど、さまざまな場面で活用されています。
実は、HTMLにはツールチップ専用の標準要素は存在しません。そのため、HTMLとCSSを組み合わせて、ツールチップのように見える要素を自作する必要があります。
まずは、ツールチップ用のHTMLコードを書いてみましょう。この例では、レシピサイト向けのツールチップを作成します。ユーザーが「Prepare the baking tray（天板を準備する）」という語句にマウスをホバーすると、天板の準備方法を思い出させるテキストが表示されるようにします。
以下が、ツールチップのHTMLコードです。
<html> <div style="text-align:center;"> <p>Instructions for baking:</p> <div class="tooltip">Prepare the baking tray. <span class="contents">Line tray with greaseproof paper.</span> <div> </div>
まず、style属性を1つ設定したdivタグを作成しています。このスタイルは、divタグ内のテキストを要素の中央に揃えるものです（text-align: center）。続いて、pタグを使って「Instructions for baking:」というテキストを含む段落を作成しています。
次に、ツールチップが表示される領域となるdiv要素を作成します。ここには「Prepare the baking tray.」というテキストが表示されます。divタグの中にはspanタグがあり、ユーザーが「Prepare the baking tray」にホバーしたときに表示したいテキストが格納されています。
現時点では、すべてのテキストがそのまま画面に表示されています。これは、ツールチップを作成するためのスタイルをまだ適用していないためです。以下が、CSSツールチップを作成するために使用するスタイルです。
<html>
<div style="text-align:center;">
<p>Instructions for baking:</p>
<div class="tooltip">Prepare the baking tray.
<span class="contents">Line tray with greaseproof paper.</span>
<div>
</div>
<style>
.tooltip {
display: inline-block;
position: relative;
margin: 50px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: lightblue;
color: white;
text-align: center;
padding: 10px 0;
border-radius: 5px;
position: absolute;
z-index: 1;
}
.tooltip:hover .contents {
visibility: visible;
}
このコードでは、「Prepare the baking tray」のテキストにマウスがホバーされたときに表示されるツールチップを作成しました。このツールチップには、天板の準備方法を簡単に確認できるテキストが含まれています。
それでは、CSSコードがどのように機能しているのか、ひとつずつ詳しく見ていきましょう。
.tooltipスタイル
まず、.tooltipという名前のスタイルルールを作成します。これはHTMLコード内のdivタグに適用されます。このスタイルにより、要素はインラインレベルのブロックコンテナとして定義されます。
また、ツールチップのpositionをrelativeに設定しています。これにより、ページをスクロールしてもツールチップは同じ位置に留まります。CSSの配置については、CSS positionのガイドで詳しく学べます。
最後に、ツールチップテキストの周囲に50pxのmarginを指定しています。これにより、ツールチップテキストとページ上の他の要素との間にスペースが生まれます。marginの詳細は、CSS marginの初心者向けガイドを参照してください。
.tooltip .contentsスタイル
次に、.tooltip .contentsというスタイルルールを定義します。これは、親クラスの名前が「tooltip」である、クラス名「contents」を持つ要素に適用されます。
この例では、このスタイルルールはspanタグに適用されます。このルールには、実際のツールチップ本体のスタイルが含まれています。
.contentsスタイルでは、visibilityプロパティの値をhiddenに指定しています。これにより、特別な指定がない限り、ツールチップはユーザーから非表示になります。
続いて、ツールチップの幅（width）を120px、背景色（background-color）をライトブルー、テキストの色（color）を白に設定しています。さらに、text-alignを使用して、ツールチップ内のテキストを要素の中央に揃えています。
.contentsルールの終わり近くでは、10pxのpaddingを設定し、ツールチップ内のテキストと枠線の間にスペースを作っています。また、border-radiusを5pxに設定することで、角丸のデザイン効果を与えています。
さらに、.contents要素のposition値をabsoluteに設定しています。これは、.contents要素が親要素を基準として配置されることを意味します。この場合、HTMLコード内の親要素はdivタグなので、ツールチップは常にdivタグの近くに表示されます。
.tooltip:hover .contentsスタイル
最後に、.tooltip:hover .contentsというルールを定義します。このルールは、クラス名「tooltip」を持つ要素にユーザーがマウスをホバーしたときに、ツールチップテキストを表示するために使われます。
このルールが実行されると、.contents要素のvisibilityがvisibleに設定されます。つまり、ユーザーがツールチップにホバーすると、ツールチップがWebページ上に表示されるようになるのです。
CSSツールチップの表示位置を調整する
先ほどの例では、ユーザーが「Prepare the baking tray」ラベルにホバーすると、テキストの右側にツールチップが表示されました。しかし、CSSをカスタマイズすれば、テキストのさまざまな位置にツールチップを表示できます。
右側に表示する
先ほどのコードでは、すでにテキストの右側にツールチップが配置されています。ただし、別の位置に表示するようスタイルを変更した後で、再び右側に戻したい場合は、次のコードを使用します。
.tooltip .contents {
top: -5px;
left: 105%;
}
このCSSルールを先ほどのコードと組み合わせると、テキストの右側にツールチップが配置されます。top: -5pxルールは、ツールチップをコンテナ要素の中央に揃えます。left: 105%ルールは、ツールチップの位置を基準点から105%オフセットすることで、コンテナの右側にツールチップを配置します。
ご覧のとおり、ツールチップがテキストの右側に表示されています。
左側に表示する
今度は、テキストの左側にツールチップを表示したいとしましょう。その場合は、次のコードを使用します。
.tooltip .contents {
top: -5px;
right: 105%;
}
このコードを先ほどのコードに追加すると、テキストの左側にツールチップが配置されます。top: -5pxルールは、前の例と同様に、ツールチップをコンテナの中央に揃えます。right: 105%ルールにより、コンテナの左側にツールチップを配置できます。
ツールチップがテキストの左側に表示されました。
上側に表示する
テキストの上側にツールチップを表示したい場合は、次のコードで実現できます。
.tooltip .contents {
bottom: 100%;
left: 50%;
margin-left: -60px;
}
この例では、3つのCSSスタイルを使って、テキストの上側にツールチップを配置しています。bottom: 100%とleft: 50%のスタイルにより、それぞれ下端と左端を基準に、ツールチップラベル（「Prepare the baking tray」）の幅の100%分だけオフセットしています。
margin-leftスタイルにより、ツールチップを中央揃えにしています。ツールチップの幅は120pxなので、margin-leftの値として-60px（120pxの半分）を指定しています。これにより、ツールチップラベルの真上中央にツールチップが表示されます。
下側に表示する
「Prepare the baking tray」ラベルの下側にツールチップを表示したい場合は、次のコードを使用します。
.tooltip .contents {
top: 100%;
left: 50%;
margin-left: -60px;
}
このコードは「上側に表示する」例とほぼ同じスタイルですが、1点だけ異なります。この例ではtop: 100%スタイルを使用しています（前の例ではbottom: 100%でした）。このスタイルにより、ツールチップボックスをラベルの幅の100%分だけオフセットし、ラベルの下側に配置できます。
フェードインするツールチップを作る
ツールチップをデザインする際、ユーザーがホバーしたときにツールチップテキストをフェードイン表示させたいことがあります。これにより、ツールチップが画面に現れる際のトランジションがより美しくなります。
フェードインするツールチップを作成するためのスタイルは次のとおりです。
.tooltip .contents {
opacity: 0;
transition: opacity 2s;
}
.tooltip:hover .contents {
opacity: 1;
}
このスタイルを最初の例のコードと組み合わせると、フェードイン効果を実現できます。仕組みを分解して見てみましょう。まず、ツールチップのopacity（不透明度）を0に指定します。これにより、ツールチップは非表示になります。
次に、transitionプロパティに「opacity」と「2s」という2つの値を指定します。「opacity」はトランジションを適用するCSSプロパティを指し、「2s」はトランジションの継続時間（秒）を指します。
そして、.tooltip:hover .contentsルールを作成し、ユーザーがツールチップにホバーしたときにopacityを1に設定します。
これにより、ユーザーがツールチップにホバーすると、要素が完全に透明（非表示）の状態から完全に表示された状態へと滑らかに遷移する効果が得られます。トランジション時間を2sと指定しているため、この遷移には2秒かかります。
CSSトランジションについてさらに学びたい方は、CSS transitionプロパティのガイドをご覧ください。
まとめ
ツールチップは、Webページに追加情報を表示するために使用される便利なUI要素です。HTMLとCSSを組み合わせれば、見た目にも美しいツールチップをデザインし、ページに補足情報を自然に組み込めます。
本記事では、具体例を挙げながら、CSSでツールチップを作成する方法と、ツールチップをラベルの左・右・下・上に配置する方法を解説しました。さらに、ホバー時に発動するフェードイン効果の実装方法についても取り上げました。
これで、プロのWebデザイナーのように、自分だけのCSSツールチップをデザインするための知識が身につきました。ぜひ実際のプロジェクトで試してみてください。
-
CSSでツールチップを作る方法｜サンプルコード付きで解説
CSSツールチップとは？ ツールチップ（Tooltip）は、要素に追加情報を設定するためのUIパーツです。訪問者がマウスポインターを要素の上に重ねると、Webページ上に補足説明がポップアップ表示されます。JavaScriptに頼らず、CSSだけでも手軽に実装できるのが大きな魅力です。 以下は、CSSのみを使用してツールチップを構築するサンプルコードです。 サンプルコード <!DOCTYPE html> <html> <style> body { font-family: "Segoe UI", Tahoma, G
-
CSSだけでツールチップを作成する方法をわかりやすく解説
Webページでテキストやボタンにマウスカーソルを合わせたときに、補足説明がふわりと表示される「ツールチップ」。JavaScriptを使わなくても、CSSだけでも簡単に実装できることをご存じでしょうか。この記事では、CSSのposition、visibility、opacity、そして:hover擬似クラスを組み合わせて、吹き出し付きのツールチップを作成する方法を紹介します。ツールチップの仕組み基本的な仕組みは以下の通りです。親要素（.tooltip）にposition: relative;を指定し、基準位置とします。ツールチップ本体（.toolText）はposition: absolute;