CSSを使用したツールチップを作成します。
デモ：ツールチップの例
ツールチップは、多くの場合、ユーザーが要素の上にマウスポインタを移動したときに何かについての追加情報を指定するために使用されます。
基本的なツールチップ
ユーザーが要素の上にマウスを移動したときに表示されるツールヒントを作成します。
例
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip"> Hover
over me
<span class="tooltiptext"> Tooltip
text </span>
</div> »それを自分で試してみてください 例の説明しました
HTML）のようなコンテナ要素（使用<div> ）と追加"tooltip"それにクラスを。 このオーバーすると、ユーザーのマウス<div>は、ツールヒントのテキストが表示されます。
ツールヒントのテキストは、（のようなインライン要素の中に置かれている<span>で） class="tooltiptext"
CSS） tooltipクラスの使用position:relative 、ツールヒントテキスト（位置決めするために必要とされるposition:absolute 。） 注意：ツールヒントを配置する方法については、以下の例を参照してください。
tooltiptextクラスは、実際のツールヒントテキストを保持しています。 これは、デフォルトでは非表示され、（下記参照）ホバー上に表示されます。 120ピクセル幅、黒の背景色、白のテキストの色、中心テキスト、および5pxの上下のパディング：我々はまた、それにはいくつかの基本的なスタイルを追加しました。
CSS3 border-radiusプロパティは、ツールヒントのテキストに丸い角を追加するために使用されます。
:hoverセレクターは、ユーザーが上にマウスを移動したときにツールチップのテキストを表示するために使用され<div>とclass="tooltip" 。
位置決めツールチップ
この例では、ツールチップを右に配置されている(left:105%)の"hoverable"テキスト(<div>) また注意top:-5px 、そのコンテナ要素の中央に配置するために使用されます。 ツールヒントのテキストは5pxのの上下のパディングを持っているので、我々は数5を使用します 。 あなたは、そのパディングを増やす場合は、またの値が増加するtop （これはあなたが望むものである場合）、それは真ん中にとどまることを確実にするためにプロパティを。 あなたが左に配置されたツールチップをしたい場合も同様です。
右のツールチップ
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
結果：
左のツールチップ
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
結果：
あなたはツールチップが上または下部に表示したい場合は、以下の例を参照してください。 我々が使用することに注意してくださいmargin-leftマイナス60ピクセルの値を持つプロパティを。 これはhoverableテキストの上/下のツールチップを中央にあります。 これは、ツールチップの幅（= 60 2分の120）の半分に設定されています。
トップツールチップ
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
結果：
ボトムツールチップ
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
結果：
ツールチップ矢印
ツールチップの具体的な側面から表示されます矢印を作成するには、擬似要素クラスと、ツールチップの後に「空」のコンテンツを追加::afterと一緒にcontentプロパティ。 矢印自体は境界線を使用して作成されます。 これは、ツールチップが吹き出しのように見えるようになります。
この例では、ツールチップの下にある矢印を追加する方法を示しています。
ボトムアロー
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
結果：
例の説明しました
ポジションツールチップ内部の矢印： top: 100%ツールチップの下部にある矢印を配置します。 left: 50%矢印を中心に説明します。
注： border-widthプロパティには、矢印のサイズを指定します。 これを変更した場合、また、変更margin-leftと同じに値を。 これは、中心の矢印を維持します。
border-color矢印にコンテンツを変換するために使用されます。 我々は透明に黒の上の境界、および残りの部分を設定します。 すべての側面が黒だった場合は、黒い四角の箱で終わるだろう。
この例では、ツールチップの最上部にある矢印を追加する方法を示します。 私たちは下罫線の色にこの時間を設定していることに注意してください：
トップアロー
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
結果：
この例では、ツールチップの左にある矢印を追加する方法を示しています。
左矢印
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
結果：
この例では、ツールチップの右側にある矢印を追加する方法を示しています。
右矢印
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
結果：
ツールチップでフェード（アニメーション）
あなたがツールチップテキストをフェードインしたい場合は、それが見えるようにしようとするとき、あなたはCSS3の使用することができますtransitionと一緒にプロパティをopacityプロパティ、および指定した秒数で、100％可視には完全に見えないから行く（1秒）この例では：
例
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} »それを自分で試してみてください 注：後で、私たちのチュートリアルのトランジションやアニメーションについての詳細を学びます。