補足説明をする際に最適！HTML・CSS・JSでツールチップを作ってみた

※当サイトにはプロモーションが含まれています。

Webサイトやブログで、「この用語って何？」とユーザーが疑問に思いそうな専門用語や略語を記載しなければいけないこともあると思います。

かといって、その都度注釈や脚注を入れてしまうと、文章の流れが損なわれてしまい読みにくくなることも……。

そんなときに便利なのが、ツールチップです。

にゃのらいと

例えば、こんな使い方ができるにゃ！

大谷翔平❓1994年生まれ、岩手県出身のプロ野球選手。
メジャーリーグでは投手と打者の“二刀流”で活躍。選手は、2024年からロサンゼルス・ドジャース❓アメリカ・ナショナルリーグ西地区所属のMLB球団。
本拠地はドジャー・スタジアム（カリフォルニア州ロサンゼルス）。に移籍し、注目を集めています。

「大谷翔平？」「ロサンゼルス・ドジャース？」の箇所にカーソルをマウスオーバーすると、補足説明が表示されます。

なお、スマートフォンの場合は、タップすることで、補足説明の表示/非表示が切り替わります。

今回は、用語や文章の補足説明などをしたい時に使えるツールチップを作成してみました。

ツールチップを表示させる方法

補足説明などをする際に最適なツールチップを適用させる、HTML、CSS、JavaScriptです。

HTML

<p>
<span class="nya-tooltip-wrapper">
大谷翔平
<span class="nya-tooltip-icon">❓</span>
<span class="nya-tooltip-text">
1994年生まれ、岩手県出身のプロ野球選手。<br>
メジャーリーグでは投手と打者の“二刀流”で活躍。
</span>
</span>
選手は、2024年から
<span class="nya-tooltip-wrapper">
ロサンゼルス・ドジャース
<span class="nya-tooltip-icon">❓</span>
<span class="nya-tooltip-text">
アメリカ・ナショナルリーグ西地区所属のMLB球団。<br>
本拠地はドジャー・スタジアム（カリフォルニア州ロサンゼルス）。
</span>
</span>
に移籍し、注目を集めています。
</p>

にゃテック

各要素の役割と注意点について説明するにゃ

nya-tooltip-wrapperについて

この要素でツールチップ全体を包みます
クリックやホバーのトリガーとなる要素なので、必ず1つの語句や短いフレーズを包むようにします
このクラスがないと、ツールチップの動作自体が機能しません

nya-tooltip-iconについて

小さな「❓」マークなどを表示するための装飾用要素です

nya-tooltip-textについて

実際に表示される補足説明の本文を入れる領域です
HTMLの <br> を使えば改行も可能です
この要素がnya-tooltip-wrapperの直下に含まれていないと、ツールチップが正しく表示されません

CSS

.nya-tooltip-wrapper {
position: relative;
display: inline-block;
border-bottom: 1px dotted #666;
color: #007acc;
cursor: help;
}

.nya-tooltip-icon {
font-size: 0.85em;
margin-left: 4px;
color: #999;
}

.nya-tooltip-text {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 10px 14px;
font-size: 13px;
white-space: normal;
border-radius: 6px;
z-index: 999;
width: max-content;
max-width: 260px;
box-sizing: border-box;
}

/* 表示時 */
.nya-tooltip-wrapper:hover .nya-tooltip-text,
.nya-tooltip-wrapper.nya-active .nya-tooltip-text {
visibility: visible;
opacity: 1;
}

/* 計測用クラス：一瞬だけ表示して位置取得する */
.nya-tooltip-wrapper.nya-measuring .nya-tooltip-text {
visibility: visible;
opacity: 0;
}

表示される説明ボックスのスタイルは、.nya-tooltip-textで定義しています。

ツールチップの位置や横幅の調整（max-width）は、この箇所で調整します。

また、.nya-active / .nya-measuringのクラスは、JavaScriptが動的に付け外しするクラスとして使用しています。

JavaScript

 document.addEventListener('DOMContentLoaded', function () {
const tooltips = document.querySelectorAll('.nya-tooltip-wrapper');
function adjustTooltipPosition(tooltipText) {
tooltipText.style.left = '';
tooltipText.style.right = '';
tooltipText.style.transform = '';

const rect = tooltipText.getBoundingClientRect();
if (rect.left < 8) {
tooltipText.style.left = '0';
tooltipText.style.transform = 'none';
} else if (rect.right > window.innerWidth - 8) {
tooltipText.style.left = 'auto';
tooltipText.style.right = '0';
tooltipText.style.transform = 'none';
} else {
tooltipText.style.left = '50%';
tooltipText.style.right = 'auto';
tooltipText.style.transform = 'translateX(-50%)';
}
}

tooltips.forEach(function (tooltip) {
const tooltipText = tooltip.querySelector('.nya-tooltip-text');

// スマホ・PC共通：クリックで表示・補正
tooltip.addEventListener('click', function (e) {
e.stopPropagation();
tooltips.forEach(t => {
if (t !== tooltip) t.classList.remove('nya-active');
});
tooltip.classList.toggle('nya-active');

setTimeout(() => {
adjustTooltipPosition(tooltipText);
}, 20);
});

// PC向け：hover時に補正用の仮表示→計測→本表示
tooltip.addEventListener('mouseenter', () => {
tooltip.classList.add('nya-measuring');
setTimeout(() => {
adjustTooltipPosition(tooltipText);
tooltip.classList.remove('nya-measuring');
tooltip.classList.add('nya-active');
}, 20);
});

tooltip.addEventListener('mouseleave', () => {
tooltip.classList.remove('nya-active');
});
});

// 他の場所をクリックしたら非表示
document.addEventListener('click', function () {
tooltips.forEach(t => t.classList.remove('nya-active'));
});
});

adjustTooltipPosition()で、ツールチップが画面の左端や右端に飛び出さないように補正していますが、調整しきれない場合もあるかもしれません･･･。

ツールチップを使いたい場面はそんなに多くないとは思いますが、参考になることがあれば幸いです。