title属性を使う方法

HTMLのtitle属性を使うと、簡単にツールチップを表示できます。 ユーザーがマウスを要素の上に載せると、ブラウザが自動的にツールチップを表示します。

例

<button title="これはツールチップです">ホバーしてください</button>

結果：

ホバーしてください

CSSでツールチップを作成する

title属性は簡単ですが、デザインをカスタマイズできません。 そこで、CSSを使って独自のツールチップを作成する方法を紹介します。

基本的なCSSツールチップ

以下のHTMLとCSSでシンプルなツールチップを作れます。

<div class="tooltip">
    ホバーしてください
    <span class="tooltip-text">これはツールチップです</span>
</div>
    

対応するCSS：

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

.tooltip-text {
    visibility: hidden;
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
}
    

結果

JavaScriptでツールチップを作成する

JavaScriptを使えば、より動的なツールチップを作成できます。 例えば、マウスの動きに応じてツールチップの位置を変更することが可能です。

例

<button id="tooltip-btn">ホバーしてください</button>
<div id="tooltip" style="display:none; position:absolute; background:black; color:white; padding:5px; border-radius:5px;">
    これはツールチップです
</div>

<script>
    const btn = document.getElementById("tooltip-btn");
    const tooltip = document.getElementById("tooltip");

    btn.addEventListener("mouseover", (event) => {
        tooltip.style.display = "block";
        tooltip.style.left = event.pageX + "px";
        tooltip.style.top = event.pageY - 30 + "px";
    });

    btn.addEventListener("mouseout", () => {
        tooltip.style.display = "none";
    });
</script>
    

結果

ホバーしてください

高度なツールチップの作成

さらに高度なツールチップを作るには、以下のような技術を組み合わせることができます：

• アニメーション（CSSのtransitionやJavaScriptのアニメーションライブラリ）
• ツールチップの遅延表示
• クリックイベントでのツールチップ表示
• 複数行のツールチップ

クリックでツールチップを表示

クリックするとツールチップを表示する例：

<button id="click-tooltip-btn">クリックしてください</button>
<div id="click-tooltip" style="display:none; position:absolute; background:black; color:white; padding:5px; border-radius:5px;">
    クリックで表示するツールチップ
</div>

<script>
    const clickBtn = document.getElementById("click-tooltip-btn");
    const clickTooltip = document.getElementById("click-tooltip");

    clickBtn.addEventListener("click", (event) => {
        clickTooltip.style.display = (clickTooltip.style.display === "none") ? "block" : "none";
        clickTooltip.style.left = event.pageX + "px";
        clickTooltip.style.top = event.pageY - 30 + "px";
    });
</script>
    

結果

クリックしてください