如何在移动端触发tooltip显示？替换onmouseover为onclick可行吗？

完全可行。移动端无鼠标悬停交互，将onmouseover替换为onclick是适配移动端的合理方案，能让用户通过点击触发tooltip，符合移动端交互习惯。

以下提供两种实现方式：

方案1：动态修改内联事件（适配原有代码结构） #

这种方式保留原有内联事件写法，通过JS根据屏幕尺寸切换事件属性：

// 切换tooltip触发事件的函数
function toggleTooltipTrigger() {
  const tooltipLinks = document.querySelectorAll('a.tooltip');
  const isMobile = window.innerWidth < 768;

  tooltipLinks.forEach(link => {
    if (isMobile) {
      link.removeAttribute('onmouseover');
      // 添加click事件并阻止默认跳转
      link.setAttribute('onclick', `tooltip.pop(this, '#tip3', {sticky:true, position:0, cssClass:'no-padding'}); return false;`);
    } else {
      link.removeAttribute('onclick');
      link.setAttribute('onmouseover', `tooltip.pop(this, '#tip3', {sticky:true, position:0, cssClass:'no-padding'});`);
    }
  });
}

// 页面加载时初始化
window.addEventListener('load', toggleTooltipTrigger);
// 窗口尺寸变化时重新适配
window.addEventListener('resize', toggleTooltipTrigger);

方案2：事件监听（推荐，分离HTML与JS逻辑） #

这种方式移除内联事件，用事件监听实现，更符合现代前端开发规范：

修改后的HTML #

<a class="tooltip" href="#tip3">Lorem, ipsum.</a>

对应的JS代码 #

const tooltipLinks = document.querySelectorAll('a.tooltip');

// 通用的tooltip触发逻辑
function showTooltip(e) {
  e.preventDefault(); // 阻止<a>标签默认跳转行为
  const tipSelector = this.getAttribute('href');
  tooltip.pop(this, tipSelector, {sticky:true, position:0, cssClass:'no-padding'});
}

// 更新事件监听的函数
function updateTooltipEvents() {
  const isMobile = window.innerWidth < 768;

  tooltipLinks.forEach(link => {
    // 先移除所有旧的事件监听
    link.removeEventListener('mouseover', showTooltip);
    link.removeEventListener('click', showTooltip);

    // 根据屏幕尺寸添加对应事件
    if (isMobile) {
      link.addEventListener('click', showTooltip);
    } else {
      link.addEventListener('mouseover', showTooltip);
    }
  });
}

// 初始化和监听窗口变化
window.addEventListener('load', updateTooltipEvents);
window.addEventListener('resize', updateTooltipEvents);

说明：两种方案都会在页面加载和窗口尺寸变化时自动适配，确保桌面端和移动端都有合适的交互触发方式。

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