mobile - 移动浏览器的工具提示

Question

如果我想提供更多信息，我目前设置了一些 HTML 的 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 来监听点击，然后显示一个类似工具提示的对话框？有没有原生机制？<​​/p>

Answer 1

您可以使用 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/