AI向け説明 AI Description

ホバー時に表示されるツールチップ。トリガー要素に`position: relative`を設定し、ツールチップに`position: absolute`を設定します。位置は`data-position`属性で指定し、`transform`と`translate`で配置します。矢印は`::after`疑似要素で実装し、`border`で三角形を作成します。フェードインアニメーションは`opacity`と`transform`で実装します。CSS変数（`--tooltip-duration`、`--tooltip-bg`、`--tooltip-text`）を使用して、アニメーション速度やスタイルをカスタマイズできます。

A tooltip that appears on hover. Set `position: relative` on the trigger element and `position: absolute` on the tooltip. Position is specified with `data-position` attribute, using `transform` and `translate` for placement. Arrow is implemented with `::after` pseudo-element, creating a triangle with `border`. Fade-in animation is implemented with `opacity` and `transform`. Use CSS variables (`--tooltip-duration`, `--tooltip-bg`, `--tooltip-text`) to customize animation speed and styling.

調整可能パラメータ Adjustable Parameters

• --tooltip-duration — アニメーションの速度（例: 0.2s, 0.3s） animation duration (e.g., 0.2s, 0.3s)
• --tooltip-bg — ツールチップの背景色（例: #1a1d3a, #5c6ac4） tooltip background color (e.g., #1a1d3a, #5c6ac4)
• --tooltip-text — ツールチップのテキスト色 tooltip text color
• position — 表示位置（top, bottom, left, right）。`data-position`属性で指定 display position (top, bottom, left, right). Specified with `data-position` attribute

実装 Implementation

HTML + CSS + JS

<div class="tooltip-trigger" data-position="top">
  Hover me
  <span class="tooltip">Tooltip text</span>
</div>

<style>
:root {
  --tooltip-duration: 0.2s;
  --tooltip-bg: #1a1d3a;
  --tooltip-text: #f5f6ff;
}

.tooltip-trigger {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  padding: 8px 12px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--tooltip-duration) ease, transform var(--tooltip-duration) ease;
  z-index: 1000;
}

.tooltip-trigger[data-position="top"] .tooltip {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.tooltip-trigger[data-position="top"]:hover .tooltip {
  transform: translateX(-50%) translateY(0);
}

.tooltip-trigger:hover .tooltip {
  opacity: 1;
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: var(--tooltip-bg);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<script>
// CSS変数を動的に変更する例
document.documentElement.style.setProperty("--tooltip-duration", "0.3s");
document.documentElement.style.setProperty("--tooltip-bg", "#5c6ac4");
</script>

React (JSX + CSS)

// react/I-004.jsx
import { useState } from "react";
import "./I-004.css";

export default function Tooltip({ 
  children, 
  content, 
  position = "top",
  duration = "0.2s",
  bgColor = "#1a1d3a"
}) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div
      className="tooltip-trigger"
      data-position={position}
      style={{
        "--tooltip-duration": duration,
        "--tooltip-bg": bgColor
      }}
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
    >
      {children}
      {isVisible && (
        <span className="tooltip">{content}</span>
      )}
    </div>
  );
}

/* react/I-004.css */
:root {
  --tooltip-duration: 0.2s;
  --tooltip-bg: #1a1d3a;
  --tooltip-text: #f5f6ff;
}

.tooltip-trigger {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  padding: 8px 12px;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--tooltip-duration) ease, transform var(--tooltip-duration) ease;
  z-index: 1000;
}

.tooltip-trigger[data-position="top"] .tooltip {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.tooltip-trigger[data-position="top"]:hover .tooltip {
  transform: translateX(-50%) translateY(0);
}

.tooltip-trigger:hover .tooltip {
  opacity: 1;
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: var(--tooltip-bg);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}