移动端如何查看HTML<abbr>标签的title属性提示内容？

我们在HTML中通常会如下使用<abbr>标签：

<abbr title="Laugh Out Loud">LOL</abbr>

PC端可通过鼠标悬停触发title属性的浮层提示，但移动端没有hover交互逻辑，以下是具体说明：

原生系统默认情况 #

绝大多数移动端浏览器没有内置触发<abbr>标签title属性提示的交互规则，你测试的长按、双击无反应是正常现象，不存在通用的原生操作方式。

开发者适配方案 #

如果是自己开发站点需要适配移动端查看abbr的title内容，可选用以下方案：

• 最兼容兜底方案：首次出现缩写时直接附带全称，比如 LOL(Laugh Out Loud)，无需任何额外交互就能在所有设备正常查看，适配性最高。
• 纯CSS触摸显示方案：使用:active伪类配合attr()函数调用title值，示例代码如下：

abbr {
  position: relative;
  cursor: pointer;
}
abbr:active::after {
  content: attr(title);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 999;
}

用户按住<abbr>元素时就会显示title内容，松手后自动消失，无需额外引入JS。

• JS自定义交互方案：给所有<abbr>元素绑定点击/触摸事件，点击时弹出固定的tooltip提示框，可设置自动消失时间或者点击其他区域关闭，灵活度更高，可适配更复杂的展示需求。

普通用户访问第三方站点说明 #

如果是访问其他未做适配的网站要查看<abbr>的title内容，目前没有通用的快捷操作方法，可通过浏览器的查看网页源码功能，找到对应<abbr>标签的代码段查看title属性值。

内容的提问来源于stack exchange，提问作者Broteen Das