CSSツールチップ(Tooltip)

この記事では、HTMLとCSSを使用してツールチップを作成する方法を紹介します。

ツールチップはマウスが指定した要素に移動するとトリガーされます。まず以下の4つの例を見てみましょう：

基本ツールチップ(Tooltip)

ツールチップはマウスが指定した要素に移動すると表示されます：

例の解説

HTML)コンテナ要素（<div>など）を使用し、"tooltip"クラスを追加します。マウスが<div>の上に移動するとツールチップ情報が表示されます。

ツールチップテキストはインライン要素（<span>など）に配置し、class="tooltiptext"。

CSS)tooltipクラスを使用します。position:relativeツールチップテキストには配置値を設定する必要があります。position:absolute。 注意：次の例では、さらに多くの配置効果を示します。

tooltiptextクラスは実際のツールチップテキストに使用されます。初期状態は非表示で、マウスが要素に移動すると表示されます。幅、背景色、フォント色などのスタイルが設定されています。

CSS3 border-radius属性はツールチップに角丸を追加するために使用されます。

:hoverセレクタは、マウスが指定した要素<div>の上に移動したときに表示されるツールチップに使用されます。

ツールチップの配置

次の例では、ツールチップは指定した要素の右側に表示されます(left:105%) 。

注意top:-5pxコンテナ要素の中央に配置するのと同じです。数値を使用します。5ツールチップテキストの上下のpadding（内余白）が5pxであるためです。

paddingの値を変更する場合は、topの値もそれに応じて変更する必要があります。そうすることで中央揃えを確保できます。

ツールチップを左側に表示する場合も同じ原理です。

ツールチップを上部または下部に表示したい場合は、margin-left属性を使用し、-60pxに設定します。この数値は、幅の半分を使用して中央揃えにすることから計算されます。つまり、width/2（120/2 = 60）です。

矢印を追加

CSSの疑似要素::afterとcontent属性を使用して、ツールチップ用の小さな矢印マークを作成できます。矢印はボーダー（枠線）で構成されていますが、組み合わせると、ツールチップは吹き出しのように見えます。

次の例では、上部に表示されるツールチップに下部矢印を追加する方法を示します：

例の解説

ツールチップ内で矢印を配置します:top: 100%矢印はツールチップの下部に表示されます。left: 50%矢印を中央揃えにするために使用します。

注意：border-width属性は矢印のサイズを指定します。これを変更する場合は、margin-left値も変更する必要があります。そうすることで矢印が中央に表示されます。

border-colorコンテンツを矢印に変換するために使用します。上部のボーダーを黒に設定し、他は透明にします。他の部分も黒に設定すると、黒い四角形として表示されます。

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

次の2つの例は、左右の矢印の例です：

フェードイン効果

CSS3のtransitionプロパティとopacityプロパティを使用して、ツールチップのフェードイン効果を実装できます:

その他の例

美しいCSSツールチップ