移动浏览器的工具提示

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 来监听点击，然后显示一个类似工具提示的对话框？有什么原生机制吗？

原文由 at. 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 flavaflo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个 CSS 唯一的解决方案。 （类似于@Jamie Pate 的回答，但没有 JavaScript。）

我们可以使用伪类 :hover ，但我不确定点击元素时所有移动浏览器都应用这些样式。我正在使用伪类 :focus 因为我猜它更安全。但是，当使用伪类 :focus 我们需要将 tabindex="0" 添加到本质上没有焦点状态的元素。

我正在使用 2 @media 查询来确保所有移动设备都是有针对性的。 (pointer: coarse) 查询将针对主要输入法是“粗略”的任何设备，例如手指。而 (hover: none) 查询将针对主指向系统无法悬停的任何设备。

这个片段是所有需要的：

 @media (pointer: coarse), (hover: none) {
      [title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
      }
      [title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
      }
    }

 /*Semantic Styling*/
body {
  display: grid;
  place-items: center;
  text-align: center;
  height: 100vh;
}

a {
  height: 40px;
  width: 200px;
  background: #fa4766;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

/*Functional Styling*/
@media (pointer: coarse), (hover: none) {
  [title] {
    position: relative;
    display: flex;
    justify-content: center;
  }
  [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: #000;
    background-color: #fff;
    border: 1px solid;
    width: fit-content;
    padding: 3px;
  }

}

 <a title="this is the Title text" tabindex="0">Tag with Title</a>

显然，您需要在移动设备上打开它进行测试。 这是具有相同代码的 Pen 。

原文由 H K 发布，翻译遵循 CC BY-SA 4.0 许可协议