CSS ツールチップ

CSS でツールチップを作成します。

デモ：ツールチップの例

ツールチップは、多くの場合、ユーザが要素の上にマウスポインタを移動したときに、何らかの特別情報を指定するために使用します：

基本的なツールチップ

ユーザーが要素の上にマウスを移動したときに表示されるツールチップを作成します：

例の説明

HTML)コンテナ（例えば、<div>）要素を使用し、そこに "tooltip" クラスを追加します。 この <div> にマウスを乗せると、ツールチップのテキストが表示されます。

ツールチップのテキストは、class="tooltiptext" を持つインライン要素（例えば、<span>）の中に配置します。

CSS) tooltip は、ツールチップ・テキスト (position:absolute) を配置するために必要な position:relative を使用します 注: ツールチップを配置する方法については、以下の例を参照してください。

tooltiptext クラスには、実際のツールチップ・テキストが含まれます。 これは、デフォルトでは非表示で、ホバー時に表示されます（下記参照）。 次のような、いくつかの基本的なスタイルも追加しました：幅を 120px、背景色を黒、テキストの色を白、テキストの中央揃え、上下パディング 5px。

CSS3 border-radius プロパティは、ツールチップ・テキストの角を丸めるために使用します。

:hover セレクタは、ユーザが class="tooltip" を持つ <div> の上にマウスを移動したときに、 ツールチップ・テキストを表示するために使用します。

ツールチップの配置

この例で、ツールチップは "hoverable" テキスト (<div>) の右側 (left:105%) に配置しています。 また、top:-5px は、コンテナ要素の中央に配置するために使用していることにも注意してください。 ツールチップ・テキストには、上下 5px のパディングを設定します。 パディングを増やす場合、（望みであれば）中央に留まることを保証すためには top プロパティの値も増やします。 ツールチップを左に配置したい場合も同様です。

ツールチップを上部または下部に表示したい場合は、下の例を参照してください。 -60px の値で margin-left プロパティを使用していることに注意してください。 これは、hoverable テキストの下/上にツールチップを中央に表示します。 これは、ツールチップの幅の半分（120/2 = 60）に設定されます。

ツールチップの矢印

ツールチップの指定した辺に表示する矢印を作成するには、content プロパティと共に、 擬似要素クラス ::after を持つ「空」のコンテンツをツールチップの後に追加します。 矢印自体はボーダーを使用して作成します。これで、ツールチップが吹き出しに見えるようになります。

この例は、ツールチップの下側に矢印を追加する方法を示しています：

例の説明

ツールチップ内の矢印の位置：top: 100% は、ツールチップの下部に矢印を配置します。 left: 50% は、矢印を中心に配置します。

注: border-width プロパティは、矢印のサイズを指定します。 これを変更する場合は、同じように margin-left の値も変更します。これで、矢印は中央ままです

border-color は、コンテンツを矢印に変換するために使用します。 上のボーダーを黒に、残りの部分を透明に設定します。すべての辺を黒にした場合、黒の四角いボックスになってしまいます。

この例は、ツールチップの上部に矢印を追加する方法を示しています。 今回は、下ボーダーに色を設定していることに注意してください：

この例は、ツールチップの左に矢印を追加する方法を示しています：

この例は、ツールチップの右に矢印を追加する方法を示しています：

ツールチップのフェードイン (アニメーション)

表示されようとしているときに、ツールチップ・テキストをフェードインする場合は、opacity プロパティと一緒に CSS3 の transition プロパティを使用することで、指定の秒数で完全に見えない状態から 100％ 見えるようにすることができます （この例では 1 秒です）：

注:トランジションとアニメーションに関する詳細は、このチュートリアルに後段で学習します。