モバイルブラウザ向けツールチップ

質問

現在、私は title 属性を設定しています。

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>

次にCSSで

.more_info {
  border-bottom: 1px dotted;
}

マウスを動かすと視覚的なインジケータが表示され、さらに小さなポップアップで詳細情報が表示される、非常に素晴らしい仕組みです。 しかし、モバイルブラウザでは、そのツールチップが表示されません。 title 属性は効果がないようです。 モバイルブラウザでテキストの一部についてより多くの情報を与えるための適切な方法は何でしょうか？ 上記と同じですが、Javascriptを使用してクリックをリッスンし、ツールチップのようなダイアログを表示させるのでしょうか？ネイティブのメカニズムはあるのでしょうか？

どのように解決するのですか？

タイトルツールチップの動作は、Javascriptでごまかすことができます。を持つ要素をクリック/タブすると、タイトルが表示されます。 title 属性を持つ要素をクリック/タブすると、タイトルテキストを含む子要素が追加されます。もう一度クリックすると、それは削除されます。

Javascript（jQueryで行う）。

$("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です。

.more_info {
  border-bottom: 1px dotted;
  position: relative;
}

.more_info .title {
  position: absolute;
  top: 20px;
  background: silver;
  padding: 4px;
  left: 0;
  white-space: nowrap;
}

デモ http://jsfiddle.net/xaAN3/