HTMLとCSSでspan要素にツールチップを追加する方法

2024-09-19

HTMLで要素にツールチップを追加するには、title属性を使用します。この属性に表示したいテキストを設定すると、マウスポインタを要素の上に置いたときにツールチップが表示されます。

<span title="これはツールチップのテキストです">ここにspan要素があります</span>

CSSでは、tooltipクラスを作成し、そのクラスにツールチップのスタイルを定義することができます。例えば、position: absoluteを使ってツールチップを絶対配置し、display: noneでデフォルトでは非表示に設定します。hover擬似クラスを使用して、マウスポインタが要素の上に置かれたときにツールチップを表示するようにします。

.tooltip {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 9999;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -5px);
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 9999;
}

.tooltip:hover {
  display: block;
}

HTMLのspan要素にtooltipクラスを適用し、data-tooltip属性を使用してツールチップのテキストを設定します。

<span class="tooltip" data-tooltip="これはツールチップのテキストです">ここにspan要素があります</span>

ツールチップ作成のHTML/CSS解説

<span title="これはツールチップのテキストです">ここにspan要素があります</span>

.tooltip {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 9999;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -5px);
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 9999;
}

.tooltip:hover {
  display: block;
}

<span class="tooltip" data-tooltip="これはツールチップのテキストです">ここにspan要素があります</span>

JavaScriptを使用したツールチップ

JavaScriptを使用して、よりカスタマイズ可能なツールチップを作成することができます。以下は、JavaScriptを使用してツールチップを作成する例です。

<span id="tooltip-target">ここにspan要素があります</span>
<div id="tooltip" class="tooltip">これはツールチップのテキストです</div>

.tooltip {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 9999;
}

const tooltipTarget = document.getElementById('tooltip-target');
const tooltip = document.getElementById('tooltip');

tooltipTarget.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
  tooltip.style.left = `${tooltipTarget.offsetLeft + tooltipTarget.offsetWidth}px`;
  tooltip.style.top = `${tooltipTarget.offsetTop}px`;
});

tooltipTarget.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

このコードでは、mouseoverイベントが発生したときにツールチップを表示し、mouseoutイベントが発生したときにツールチップを非表示にします。また、ツールチップの位置を計算して、span要素の右側に表示するようにしています。

CSSのみを使用したツールチップ

CSSのみを使用して、シンプルなツールチップを作成することもできます。以下は、CSSのみを使用したツールチップの例です。

<span title="これはツールチップのテキストです">ここにspan要素があります</span>

span::after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -5px);
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 5px;
  display: none;
}

span:hover::after {
  display: block;
}