HTMLのtitle属性：使い方とベストプラクティス

HTMLの<td>要素のtitle属性は、マウスホバー時に表示されるツールチップにテキストを表示するために使用されます。この属性値に改行を挿入することで、複数行にわたってテキストを表示することができます。

改行方法

title属性値に改行を挿入するには、以下の2つの方法があります。

• HTML特殊文字を使用する

HTML特殊文字である
（改行）または
（キャリッジリターン）を使用することで、改行を挿入することができます。

例：

<td>
  <a href="#">
    <img src="image.jpg" alt="Image" title="This is a long image description that spans multiple lines.&#xA;It can be useful for providing additional information about the image.">
  </a>
</td>

• CSSを使用する

CSSのwhite-spaceプロパティを使用して、title属性値の折り返しを制御することができます。

<td>
  <a href="#">
    <img src="image.jpg" alt="Image" title="This is a long image description that spans multiple lines.">
  </a>
</td>

td img[title] {
  white-space: pre-wrap;
}

注意事項

• 古いブラウザでは、
や
が正しく解釈されない場合があります。
• CSSを使用する場合は、すべてのブラウザで正しく表示されるように、ベンダープレフィックスを付ける必要があります。

HTML

<table>
  <tr>
    <td>
      <a href="#">
        <img src="image.jpg" alt="Image" title="This is a long image description that spans multiple lines.">
      </a>
    </td>
    <td>
      <a href="#">
        <img src="image.jpg" alt="Image" title="This is a long image description that spans multiple lines.&#xA;It can be useful for providing additional information about the image.">
      </a>
    </td>
    <td>
      <a href="#">
        <img src="image.jpg" alt="Image" title="This is a long image description that spans multiple lines.">
      </a>
    </td>
  </tr>
</table>

CSS

td img[title] {
  white-space: pre-wrap;
}

結果

1つ目の<td>要素のツールチップは1行で表示されます。2つ目の<td>要素のツールチップは2行に分割されます。3つ目の<td>要素のツールチップは、CSSによって折り返されます。

title属性値に改行を挿入する他にも、ツールチップに複数行のテキストを表示する方法はいくつかあります。

• br要素を使用する
• JavaScriptを使用する

これらの方法は、title属性値に改行を挿入する方法よりも複雑ですが、より多くの柔軟性を提供します。

title属性値に改行を挿入する方法以外で、ツールチップに複数行のテキストを表示する方法はいくつかあります。

br要素を使用すると、ツールチップ内に手動で改行を挿入することができます。

<td>
  <a href="#">
    <img src="image.jpg" alt="Image" title="This is a long image description that spans multiple lines.<br>It can be useful for providing additional information about the image.">
  </a>
</td>

JavaScriptを使用すると、ツールチップの内容を動的に生成することができます。

<script>
function showTooltip(image) {
  var title = image.getAttribute("title");
  var lines = title.split("\n");
  var tooltip = "";

  for (var i = 0; i < lines.length; i++) {
    tooltip += lines[i] + "<br>";
  }

  // ツールチップを表示する
}
</script>

...

<td>
  <a href="#">
    <img src="image.jpg" alt="Image" onmouseover="showTooltip(this)">
  </a>
</td>

CSSの::beforeおよび::after疑似要素を使用すると、ツールチップ内にコンテンツを挿入することができます。

<td>
  <a href="#">
    <img src="image.jpg" alt="Image">
  </a>
</td>

td img::before {
  content: "This is a long image description that spans multiple lines.\n";
}

td img::after {
  content: "It can be useful for providing additional information about the image.";
}

aria-label属性は、アクセシビリティのためにツールチップの内容を指定するために使用することができます。

<td>
  <a href="#">
    <img src="image.jpg" alt="Image" aria-label="This is a long image description that spans multiple lines. It can be useful for providing additional information about the image.">
  </a>
</td>

• br要素は、最もシンプルで簡単な方法です。
• JavaScriptは、より多くの柔軟性を提供しますが、複雑な場合があります。
• CSSは、スタイリングを制御するのに役立ちます。
• aria-label属性は、アクセシビリティを向上させるのに役立ちます。

どの方法を選択するにしても、ツールチップの内容が簡潔で読みやすいものであることを確認してください。