HTMLとjQueryでモバイルブラウザのツールチップを実装する方法

モバイルブラウザでtitle属性のツールチップを表示する方法

PCのブラウザでは、title属性を持つ要素にマウスカーソルを合わせると、自動的にツールチップが表示されます。しかし、モバイルブラウザにはマウスオーバーの概念がないため、ネイティブのツールチップは表示されません。

そこで、title属性を持つ要素をタップした際に、そのテキストを子要素として動的に追加することで、独自のツールチップを実装します。以下に具体的なコード例を示します。

HTMLの例

<p>
  The <span class="demo" title="this is underscore">underlined</span> character.
</p>

jQueryのコード

要素がクリック（タップ）されると、まず子要素に.titleクラスを持つ要素が存在するかどうかを確認します。存在しない場合はtitle属性の値を使って新しいspan要素を追加し、すでに存在する場合はその要素を削除します。これにより、タップするたびにツールチップの表示・非表示を切り替えることができます。

$("span[title]").click(function () {
  var $title = $(this).find(".title");
  if (!$title.length) {
    $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
  } else {
    $title.remove();
  }
});

CSSのスタイル

.demo {
  border-bottom: 2px dotted;
  position: relative;
}
.demo .title {
  position: absolute;
  top: 15px;
  background: gray;
  padding: 5px;
  left: 0;
  white-space: nowrap;
}

実装のポイント

• 親要素にposition: relativeを指定し、ツールチップとなる子要素をposition: absoluteで配置することで、対象要素の直下にツールチップを表示できます。
• white-space: nowrapを指定することで、ツールチップ内のテキストが折り返されず、1行できれいに表示されます。
• 点線の下線（border-bottom: 2px dotted）を付けることで、タップ可能なツールチップの存在をユーザーに視覚的に伝えられます。