如何使用JavaScript激活展示HTML title属性，同时适配iPad触摸手势？

可以实现，iOS等触摸端浏览器默认不会响应hover逻辑唤起原生title提示，我们可以通过JavaScript监听触摸手势、自定义提示气泡的方式达到目标效果，同时不会影响桌面端原有的title悬停逻辑。

最小实现代码 #

// 仅对触摸设备生效，不干扰桌面端原生交互
if ('ontouchstart' in window) {
  // 按需选择要支持的带title属性的元素
  const targetElements = document.querySelectorAll('h1[title], label[title], span[title]')
  let activeTooltip = null

  targetElements.forEach(el => {
    el.addEventListener('touchend', e => {
      // 阻止默认行为避免冲突
      e.preventDefault()
      e.stopPropagation()

      // 关闭已存在的提示
      if (activeTooltip) {
        activeTooltip.remove()
        activeTooltip = null
      }

      const tipContent = el.getAttribute('title')
      if (!tipContent) return

      // 临时存储title值，避免和原生逻辑冲突
      el.dataset.originalTitle = tipContent
      el.removeAttribute('title')

      // 创建自定义提示气泡
      const tooltip = document.createElement('div')
      tooltip.innerText = tipContent
      tooltip.style.cssText = `
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 14px;
        z-index: 99999;
        pointer-events: none;
      `
      document.body.appendChild(tooltip)
      activeTooltip = tooltip

      // 定位到触发元素的下方
      const elRect = el.getBoundingClientRect()
      tooltip.style.left = `${elRect.left + window.scrollX}px`
      tooltip.style.top = `${elRect.bottom + 4 + window.scrollY}px`

      // 3秒自动关闭
      const autoCloseTimer = setTimeout(() => {
        if (tooltip.parentNode) {
          tooltip.remove()
          el.setAttribute('title', el.dataset.originalTitle)
          delete el.dataset.originalTitle
          activeTooltip = null
        }
      }, 3000)

      // 点击页面其他位置关闭
      const closeOnOuterClick = () => {
        clearTimeout(autoCloseTimer)
        if (tooltip.parentNode) {
          tooltip.remove()
          el.setAttribute('title', el.dataset.originalTitle)
          delete el.dataset.originalTitle
          activeTooltip = null
        }
        document.removeEventListener('touchend', closeOnOuterClick)
        document.removeEventListener('click', closeOnOuterClick)
      }
      setTimeout(() => {
        document.addEventListener('touchend', closeOnOuterClick)
        document.addEventListener('click', closeOnOuterClick)
      }, 0)
    })
  })
}

可调整优化点 #

• 手势调整：如果需要改成长按触发，只需把touchend监听替换为touchstart加延时判断，未达到长按时间松手就取消触发即可
• 动态元素适配：如果页面元素是异步渲染的，可以把事件绑定改成事件委托，绑定到document上匹配目标元素，不用单独给新增元素绑定监听
• 样式调整：可以自行修改tooltip的样式参数，和你的网站风格适配

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