CSS ツールチップ
- 前のページ CSS アニメーション
- 次のページ CSS イメージスタイル
通过 CSS 创建工具提示（Tooltip）。
演示：工具提示
例
当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
基础的工具提示
创建一个鼠标移到元素上时显示的工具提示：
例
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 如果需要在可悬停文本下面显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位工具提示文本 - 请看下面的例子 */
position: absolute;
z-index: 1;
}
/* 将鼠标悬停在工具提示容器上时，显示工具提示文本 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me</div>
<span class="tooltiptext">Tooltip text</span>
</div>
例の説明
HTML：
コンテナ要素（例：<div>）を使用して、それに "tooltip" クラスに位置付けられています。ユーザーがこの<div>にマウスをホバーすると、ツールチップテキストが表示されます。
ツールチップテキストは、 class="tooltiptext" 内包要素（例：<span>）に適用されます。
CSS：
tooltip クラスを使用して、 position:relativeを使用して、ツールチップテキストを配置します（position:absolute）。ツールチップを配置する方法についての詳細は、以下の例を参照してください。
tooltiptext クラスは実際のツールチップテキストを保存します。デフォルトでは非表示で、マウスをホバーすると表示されます（以下を参照してください）。また、基本的なスタイルとして120ピクセルの幅、黒い背景、白いテキスト、テキストが中央に配置され、上下に5ピクセルの内側マージン（padding）が追加されています。
CSS border-radius 属性はツールチップテキストに丸みを加えるために使用されます。
ユーザーがclass="tooltip"の<div>にマウスを乗せるとき、:hover 選択子はツールチップテキストを表示するために使用されます。
ツールチップを配置する方法についての詳細は、以下の例を参照してください。
この例では、ツールチップが「ホバー」テキスト（<div>）の右側に配置されています（left:105%）。また、注意していただきたいのは、top:-5px これを使用して、そのコンテナ要素の中央に配置します。数字5を使用するのは、ツールチップテキストの上下内側マージンがすべて5ピクセルであるためです。内側マージンを増やす場合は、同時に増やしてください。 top 属性の値を設定して、それが中央に留まることを確保します。ツールチップを左側に配置する場合にも同様に適用されます。
右側ツールチップ
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
結果：
左側ツールチップ
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
結果：
ツールチップが上または下に配置されるように希望する場合、以下の例をご覧ください。注意していただきたいのは、-60ピクセルの左外側マージン属性（margin-left）を使用していることです。これは、ツールチップとホバーするテキストを中央に配置するためです。この値はツールチップの幅の半分（120/2 = 60）です。
上部ツールチップ
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 幅の半分（120/2 = 60）を使用して、ツールチップを中央に配置します */
}
結果：
下部ツールチップ
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 幅の半分（120/2 = 60）を使用して、ツールチップを中央に配置します */
}
結果：
ツールチップ矢印
ツールチップの指定された側面に表示される矢印を作成するには、ツールチップの後ろに「空の」内容を追加し、パイロット要素クラスを使用してください。 ::after および content 属性です。矢印自体は枠線を使用して作成されています。これにより、ツールチップが泡のように見えます。
この例では、ツールチップの下部に矢印を追加する方法を示します：
下向き矢印
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* ツールチップの下部に配置 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: 黑色 透明 透明 透明;
}
結果：
例の説明
ツールチップ内に矢印を定位します：top: 100% 矢印をツールチップの下部に配置します。left: 50% 矢印が中央に配置されます。
注意：border-width 属性が矢印の大きさを指定します。この設定を変更する場合、以下も変更してください： margin-left 値を同じ値に変更します。これにより、矢印が中央に配置されます。
border-color 内容を矢印に変換するために使用されます。上側の枠線を黒色に、他の側を透明に設定します。すべての面が黒色であれば、最終的には黒色の四角形のボックスになります。
この例では、ツールチップの上側に矢印を追加する方法を示しました。注意していただきたいのは、这次は下側の枠線の色を設定しました：
上向き矢印
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* ツールチップの上側に配置 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: 透明 透明 黑色 透明;
}
結果：
この例では、ツールチップの左側に矢印を追加する方法を示します：
左向き矢印
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* ツールチップの左側に配置 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: 透明 黑色 透明 透明;
}
結果：
この例では、ツールチップの右側に矢印を追加する方法を示します：
右向き矢印
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* ツールチップの右側に配置 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: 透明 透明 透明 黑色;
}
結果：
フェードインのツールチップ（アニメーション）
ツールチップのテキストがフェードインおよびフェードアウトするように希望する場合、CSS transition 属性と opacity 属性を同時に使用し、指定された秒数（例では 1 秒）で完全に見えない状態から 100％ 可視な状態に変化させます：
例
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- 前のページ CSS アニメーション
- 次のページ CSS イメージスタイル
