(Sample)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ツールチップの例</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4; /* 背景色を淡いグレーに設定 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* ビューポートの高さを100%に設定 */
}
/* ツールチップの基本スタイル設定 */
.tooltip {
position: relative; /* 子要素の位置を相対的に設定 */
display: inline-block; /* インラインブロック要素として表示 */
cursor: pointer; /* カーソルをポインタに変更 */
}
/* ツールチップテキストのスタイル設定 */
.tooltip .tooltiptext {
visibility: hidden; /* デフォルトは非表示 */
width: 120px; /* 幅を120pxに設定 */
background-color: black; /* 背景色を黒に設定 */
color: #fff; /* テキスト色を白に設定 */
text-align: center; /* テキストを中央揃えに設定 */
border-radius: 5px; /* ボーダーの角を丸める */
padding: 5px 0; /* 上下のパディングを設定 */
position: absolute; /* 絶対位置に設定 */
z-index: 1; /* 他のコンテンツの前面に表示 */
bottom: 125%; /* ツールチップの位置を下に125%に設定 */
left: 50%; /* 左端を中央に設定 */
margin-left: -60px; /* ツールチップの幅の半分で中央揃え */
opacity: 0; /* 透明度を0に設定 */
transition: opacity 0.3s; /* 透明度の変化を0.3秒でトランジション */
}
/* ホバー時にツールチップを表示 */
.tooltip:hover .tooltiptext {
visibility: visible; /* ツールチップを表示 */
opacity: 1; /* 透明度を1に設定 */
}
</style>
</head>
<body>
<!-- ツールチップの定義 -->
<div class="tooltip">ホバーしてください
<span class="tooltiptext">ツールチップ</span>
</div>
</body>
</html>