テキストにマウスオーバーでツールチップを表示する

2025-12-05 15:13

テキストにマウスオーバーでツールチップを表示することができます。
下記の「ツールチップ」にマウスのカーソルを合わせてください。

説明文の中にツールチップを入れたい

下記をHTMLタグ使用可の欄に貼り付け、テキストを変更してください。
赤文字部分がマウスオーバーで表示される部分になります。

<div>説明文の中に<span class="datatooltip" data-tooltip="ツールチップを表示">ツールチップ</span>を入れたい</div>

さらに下記をスタイルシート最下部に貼り付けてください。色などは自由に変更してください。

.datatooltip {
position: relative;
border-bottom: 1px dotted #000000;
font-size: 14px;
}
.datatooltip::before {
content: attr(data-tooltip);
position: absolute;
width: 150px;
background-color: #000000;
color: #FFFFFF;
text-align: center;
padding: 10px;
border-radius: 10px;
z-index: 1;
opacity: 0;
transition: opacity .6s;
bottom: 25px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 14px;
visibility: hidden;
}
.datatooltip::after {
content: "";
position: absolute;
bottom: 15px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
opacity: 0;
transition: opacity .6s;
border-color: #000000 transparent transparent transparent;
visibility: hidden;
}
.datatooltip:hover::before, .datatooltip:hover::after {
opacity: 1;
visibility: visible;
}