How to create a tooltip ツールチップの作り方
Tooltip that appears on hover. Customize position, animation, and styling. ホバー時に表示されるツールチップ。位置、アニメーション、スタイルをカスタマイズできます。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Tooltip that appears on hover. Customize position, animation, and styling.
ホバー時に表示されるツールチップ。位置、アニメーション、スタイルをカスタマイズできます。
どこで使うかWhere to use
user engagement, data entry, content management, settings panel
アイコンボタン、略語説明、無効フォームフィールド、ショートカットヒント
特徴Key features
Custom CSS tooltip appearing on hover with configurable position (top/bottom/left/right). Arrow indicator via ::before pseudo-element. No JavaScript positioning calculation needed for most cases. Keyboard-accessible via :focus-visible.
ホバー時に表示するカスタムCSSツールチップ。位置（top/bottom/left/right）を設定可能。::before疑似要素で矢印インジケーター。ほとんどのケースでJavaScript位置計算不要。:focus-visibleでキーボードアクセシブル。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--tooltip-duration | — | animation duration (e.g., 0.2s, 0.3s) |
--tooltip-bg | — | tooltip background color (e.g., #1a1d3a, #5c6ac4) |
--tooltip-text | — | tooltip text color |
position | — | display position (top, bottom, left, right). Specified with `data-position` attribute |
実装コード Implementation Code
// 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%);
}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" + (isVisible ? " is-visible" : "")}
data-position={position}
style={{
"--tooltip-duration": duration,
"--tooltip-bg": bgColor
}}
onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)}
>
{children}
{isVisible && (
<span className="tooltip">{content}</span>
)}
</div>
);
}: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,
.tooltip-trigger[data-position="top"].is-visible .tooltip {
transform: translateX(-50%) translateY(0);
}
.tooltip-trigger:hover .tooltip,
.tooltip-trigger.is-visible .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%);
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
The tooltip text lives in a data-tooltip attribute or a .tooltip-content element. It is positioned absolutely relative to its parent (position: relative) using top/left percentages and a translateX/Y offset. On :hover (and :focus-visible), opacity transitions from 0 to 1 and a small translateY shift creates a slide-in entrance.
ツールチップのテキストはdata-tooltip属性または.tooltip-content要素に格納。top/leftパーセンテージとtranslateX/Yオフセットを使用して親要素（position:relative）に対して絶対配置。:hover（と:focus-visible）でopacityが0から1にトランジションし、小さなtranslateYシフトでスライドイン入場を演出。
カスタマイズ方法Customization
Add max-width and word-wrap: break-word for multi-line tooltips. Use data-tooltip-position to dynamically switch placement via JavaScript. Increase z-index if tooltips appear behind other elements. Style with a dark or light theme to match the surrounding UI.
max-widthとword-wrap:break-wordで複数行ツールチップに対応。data-tooltip-positionでJavaScriptによる配置の動的切り替えに使用。他要素の後ろに表示される場合はz-indexを増やす。周囲のUIに合わせてダークまたはライトテーマでスタイリング。
注意点Caveats
Tooltips must not contain interactive content (links, buttons) as they are not keyboard-navigable in this pattern. Use role="tooltip" and aria-describedby to associate the tooltip with its trigger element for screen reader compatibility.
このパターンではツールチップはキーボードナビゲーション不可のため、インタラクティブコンテンツ（リンク・ボタン）を含めないでください。スクリーンリーダー互換性のためrole="tooltip"とaria-describedbyでツールチップをトリガー要素に関連付けてください。
よくある質問 Frequently Asked Questions
How to customize the tooltip? Tooltipをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the tooltip in React? ReactでTooltipを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of tooltip? Tooltipのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.