Tooltip — ホバーで補足情報を表示する

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: sans-serif;
  padding: 32px;
  color: #1A2332;
  background: #F8FAFC;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  color: #2B7FE8;
  margin: 0 0 12px;
  letter-spacing: 0.04em;
}

/* =============================================
   Pattern 1: CSSのみ — アイコンボタン用ツールチップ
   ============================================= */

.tp-buttons {
  display: flex;
  gap: 12px;
}

.tp-btn {
  /* ★ポイント1: position: relative が必須
     ::before / ::after は position: absolute で配置される。
     このボタン自身に relative がないとページ全体が基点になり、左上に飛んでしまう。 */
  position: relative;
  width: 44px;
  height: 44px;
  font-size: 18px;
  background: #fff;
  border: 1.5px solid #D0D7E0;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: sans-serif;
}

.tp-btn:hover {
  background: #F0F4FF;
  border-color: #2B7FE8;
}

/* ★ポイント2: ::before でツールチップ本体を作る
   content: attr(data-tooltip) で HTML 属性の値を表示できる。
   bottom: calc(100% + 8px) でボタンの真上 8px に配置。
   left: 50% + transform でボタン中央に揃える。 */
.tp-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #1A2332;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  pointer-events: none;
  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

/* ★ポイント3: ::after でツールチップ下部の三角矢印を作る
   border トリックの仕組み：実体のない 5px のボックスを作り
   上辺だけ色をつけて左右を透明にすると下向き三角に見える。 */
.tp-btn::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1A2332;
  pointer-events: none;
  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}

/* ★ポイント4: ホバー時に表示
   visibility も使う理由：opacity: 0 だけだと要素が残り
   pointer-events が生きたままになるため、visibility: hidden も併用する。 */
.tp-btn:hover::before,
.tp-btn:hover::after {
  opacity: 1;
  visibility: visible;
}

/* =============================================
   Pattern 2: JS版 — テキスト省略補完
   ============================================= */

.list-desc {
  font-size: 13px;
  color: #5A6A7A;
  margin: 0 0 10px;
}

.tp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 280px;
  border: 1.5px solid #D0D7E0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.tp-list-item {
  padding: 10px 14px;
  font-size: 14px;
  color: #1A2332;
  border-bottom: 1px solid #EEF1F5;
  /* ★ここで省略表示を設定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.tp-list-item:last-child {
  border-bottom: none;
}

/* 省略が発生している行にホバーしたとき */
.tp-list-item.is-truncated:hover {
  background: #F8FAFC;
}

/* =============================================
   JS が動的に生成するツールチップボックス
   ============================================= */
.tp-tooltip-box {
  position: fixed;
  background: #1A2332;
  color: #fff;
  font-size: 12px;
  font-family: sans-serif;
  padding: 6px 12px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
  /* 下向き三角矢印 */
  transform: translateX(-50%) translateY(calc(-100% - 8px));
}

.tp-tooltip-box::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1A2332;
}

// パターン2：テキスト省略が発生している行にツールチップを表示

var items = [
  'ワイヤレスノイズキャンセリングヘッドフォン Pro Max 2024年モデル',
  'スマートウォッチ S7',
  'USB-C 7-in-1 マルチポートハブ（4K HDMI・SDカード対応）',
  'スマートスピーカー Hub Mini',
  'Bluetoothキーボード 折りたたみ式コンパクト JIS配列 バックライト付き',
  'モバイルバッテリー 20000mAh PD 65W 急速充電対応',
];

// リスト行を生成して追加
var list = document.getElementById('tp-list');
items.forEach(function(text) {
  var li = document.createElement('li');
  li.className = 'tp-list-item';
  li.textContent = text;
  list.appendChild(li);
});

// 各行にホバーイベントを設定
var listItems = document.querySelectorAll('.tp-list-item');
var tooltip = null;

listItems.forEach(function(el) {
  el.addEventListener('mouseenter', function() {
    // scrollWidth > clientWidth のときだけ省略が発生している
    if (el.scrollWidth <= el.clientWidth) return;

    el.classList.add('is-truncated');

    // ツールチップ要素を生成
    tooltip = document.createElement('div');
    tooltip.className = 'tp-tooltip-box';
    tooltip.textContent = el.textContent; // XSS対策：textContent を使う

    document.body.appendChild(tooltip);

    // 要素の位置を取得してツールチップを重ねる
    var rect = el.getBoundingClientRect();
    tooltip.style.left = (rect.left + rect.width / 2) + 'px';
    tooltip.style.top  = rect.top + 'px';
  });

  el.addEventListener('mouseleave', function() {
    el.classList.remove('is-truncated');
    if (tooltip) {
      tooltip.remove();
      tooltip = null;
    }
  });
});