<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table Tooltip with Sidebar Example</title>
<style>
/* サイドナビのスタイル */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1001;
top: 0;
left: 0;
background-color: #333;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
/* テーブルとツールチップのスタイル */
.wrap {
overflow-x: auto;
overflow-y: visible;
height: 30px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: 1px solid black;
position: relative;
}
.tooltip {
display: none;
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
z-index: 1000;
white-space: nowrap;
}
/* 吹き出しの三角マーク */
.tooltip::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent transparent #333 transparent;
}
.tooltip-icon {
cursor: pointer;
color: blue;
margin-left: 5px;
position: relative;
}
</style>
</head>
<body>
<!-- サイドナビ -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<!-- メインコンテンツ -->
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open Sidebar</span>
<div class="wrap">
<table>
<thead>
<tr>
<th>
Header 1
<span
class="tooltip-icon"
data-tooltip="This is the tooltip for header 1<br>With line break"
>?</span
>
</th>
<th>
Header 2
<span
class="tooltip-icon"
data-tooltip="This is the tooltip for header 2<br>Another line break"
>?</span
>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
</tbody>
</table>
</div>
<!-- 静的に配置されたツールチップ -->
<div class="tooltip"></div>
</div>
<script>
/* サイドナビを開く関数 */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* サイドナビを閉じる関数 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
const tooltip = document.querySelector(".tooltip");
let activeIcon = null; // 現在アクティブなアイコンを追跡する
document.querySelectorAll(".tooltip-icon").forEach((icon) => {
icon.addEventListener("click", function (event) {
const tooltipHtml = this.getAttribute("data-tooltip");
// 同じアイコンがクリックされた場合、ツールチップを閉じる
if (activeIcon === this) {
tooltip.style.display = "none";
activeIcon = null;
event.stopPropagation();
return;
}
// ツールチップの内容をHTMLで更新
tooltip.innerHTML = tooltipHtml;
// アイコンの座標を取得
const rect = this.getBoundingClientRect();
// ツールチップの幅を一度表示させて取得
tooltip.style.display = "block";
const tooltipWidth = tooltip.offsetWidth;
// アイコンの中心にツールチップの中心を合わせる
const iconCenter = rect.left + rect.width / 2;
const tooltipLeft = iconCenter - tooltipWidth / 2;
// ツールチップをアイコンの下に表示する
tooltip.style.left = `${tooltipLeft + window.scrollX}px`;
tooltip.style.top = `${rect.bottom + window.scrollY + 10}px`;
// アクティブなアイコンを更新
activeIcon = this;
// 他のツールチップが表示されたままにならないように設定
event.stopPropagation();
});
});
// ページをクリックするとツールチップを非表示にする
document.addEventListener("click", function () {
tooltip.style.display = "none";
activeIcon = null; // クリックでリセット
});
// ツールチップ自身をクリックした場合、閉じる処理を防止
tooltip.addEventListener("click", function (event) {
event.stopPropagation();
});
</script>
</body>
</html>
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme