如何无需脚本缩短HTML title属性提示延迟并支持点击触发

原生title属性的弹出提示行为是浏览器默认实现，无法通过纯HTML/CSS修改其延迟时长、也不支持配置点击触发。如果要实现你需要的两个特性，可以用纯CSS模拟自定义tooltip，完全替代title功能，不需要任何JS脚本：

方案1：零延迟hover触发tooltip #

可以自由调整提示样式、位置，也可自定义延迟时长：

<style>
.tooltip {
  position: relative;
  cursor: help;
}
/* 提示框默认隐藏 */
.tooltip::after {
  content: attr(data-tooltip); /* 把自定义属性的内容作为提示文本 */
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  display: none;
  z-index: 999;
  /* 如果需要自定义延迟，就加下面这行，第二个参数就是延迟时长，0就是无延迟 */
  /* transition: opacity 0s 0.1s; */
}
/* hover时立刻展示 */
.tooltip:hover::after {
  display: block;
}
</style>

<p>
  Hover over the icon at the end of this sentence
  and notice the delay that occurs before the 
  advisory information is displayed.
  <span class="tooltip" data-tooltip="Any way to make this instant?">ⓘ</span>
</p>

方案2：支持点击触发的tooltip #

利用CSS的:checked伪类实现点击显隐，无需JS，同时支持hover+点击双触发：

<style>
.tooltip-trigger {
  display: inline-block;
  cursor: help;
  position: relative;
}
.tooltip-trigger input {
  display: none;
}
.tooltip-trigger .tip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  display: none;
  z-index: 999;
}
/* hover触发 */
.tooltip-trigger:hover .tip {
  display: block;
}
/* 点击后保持显示，点击其他区域自动消失 */
.tooltip-trigger input:checked + .tip {
  display: block;
}
</style>

<p>
  可以hover或者点击下面的图标查看提示：
  <label class="tooltip-trigger">
    <input type="checkbox">
    <span class="tip">点击也能触发我哦</span>
    ⓘ
  </label>
</p>

内容的提问来源于stack exchange，提问作者Lonnie Best