CSSツールチップ
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ピクセル、背景色黒、テキストの色白、中央揃えのテキスト、上下5ピクセルのパディングです。
CSSborder-radiusプロパティは、ツールチップテキストに丸みを帯びた角を追加するために使用されます。
:hoverセレクターは、ユーザーが。を使用して<div>の上にマウスを移動したときにツールチップテキストを表示するために使用されますclass="tooltip"。
ポジショニングツールチップ
この例では、ツールチップはleft:105%「ホバー可能」テキスト（<div>）の右側（）に配置されています。top:-5pxまた、コンテナ要素の中央に配置するために使用されることに注意してください。ツールチップテキストの上下に5pxのパディングがあるため、数字の5を使用します。パディングを増やす場合は、topプロパティの値も増やして、プロパティが中央に留まるようにします（これが必要な場合）。ツールチップを左側に配置する場合も同様です。
右のツールチップ
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
結果：
左のツールチップ
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
結果：
ツールチップを上または下に表示する場合は、以下の例を参照してください。margin-leftマイナス60ピクセルの値でプロパティを使用することに注意してください。これは、ホバー可能なテキストの上/下のツールチップを中央に配置するためのものです。ツールチップの幅の半分（120/2 = 60）に設定されます。
トップツールチップ
.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;
}
結果：
フェードインツールチップ（アニメーション）
ツールチップテキストが表示されようとしているときにフェードインする場合は、CSStransitionプロパティをプロパティと一緒に使用しopacity
て、指定された秒数（1秒）で完全に非表示から100％表示に変更できます。例）：
例
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}