Safari拖拽元素时data-tooltip不显示问题求助

我碰到过类似的Safari拖拽行为问题，它在标准拖拽模式下确实会抑制一些hover相关的事件——这就是你的tooltip没法显示的核心原因：你的tooltip逻辑依赖mouseover事件，但Safari在拖拽过程中不会触发这个事件，除非你按住修饰键（command/option/control/fn这些），此时浏览器会切换到另一种拖拽行为模式，允许hover事件正常工作。

先梳理下你当前代码的问题：你在dragStart里给元素加了mousedown监听，但这个事件在拖拽开始后其实不会再触发了，所以这个处理并没有实际作用。

给你几个可行的解决方案：

方案1：用拖拽事件替代hover事件触发tooltip #

既然Safari在拖拽时不触发mouseover，那我们就用拖拽专属的dragover和dragleave事件来手动控制tooltip的显示和隐藏，直接复用你现有的tooltip逻辑：

// 定位到带data-tooltip的目标元素
const targetTooltipLink = document.querySelector('a[data-tooltip]');

// 拖拽悬停时触发tooltip显示
targetTooltipLink.addEventListener('dragover', function(e) {
  e.preventDefault(); // 必须阻止默认行为，否则无法触发后续drop事件
  // 调用你原本的tooltip显示逻辑
  delay1(e, this.dataset.tooltip);
});

// 拖拽离开时隐藏tooltip
targetTooltipLink.addEventListener('dragleave', function() {
  closeMessage1();
});

// 拖拽完成后确保tooltip隐藏
document.addEventListener('mouseup', function() {
  closeMessage1();
});

这个方案改动最小，能直接适配你现有的代码逻辑。

方案2：调整Safari的拖拽初始事件处理 #

你当前在dragStart里对所有浏览器都调用了event.preventDefault()，但Safari的拖拽事件处理和其他浏览器有差异，试试调整这个逻辑：

function dragStart(event) {
  draggedElement.style.position = "fixed";
  draggedElement.style.zIndex = "1";
  
  // 仅在非Safari浏览器中调用preventDefault
  if(!is_safari){
    event.preventDefault();
  }
  
  iDiv.setAttribute("style","height:"+therapistDiv.clientHeight+"px;");
  var rect = therapistDiv.getBoundingClientRect();
  offset = [ therapistDiv.offsetLeft - rect.left, therapistDiv.offsetTop - rect.top ];
  isDown = true;
}

这个方案不一定百分百有效，但可以尝试，因为Safari对拖拽事件的默认行为限制比较特殊。

方案3：手动创建临时tooltip #

如果上面的方案都不行，你可以完全绕过原有的tooltip逻辑，在拖拽时手动创建和控制tooltip：

let currentTooltip = null;
const targetTooltipLink = document.querySelector('a[data-tooltip]');

targetTooltipLink.addEventListener('dragover', function(e) {
  e.preventDefault();
  // 清理已存在的tooltip
  if(currentTooltip) currentTooltip.remove();
  
  // 创建新的tooltip元素，样式可匹配你原有tooltip的设计
  currentTooltip = document.createElement('div');
  currentTooltip.textContent = this.dataset.tooltip;
  currentTooltip.style.cssText = `
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 9999;
    top: ${e.clientY - 30}px;
    left: ${e.clientX}px;
  `;
  document.body.appendChild(currentTooltip);
});

// 拖拽离开时移除tooltip
targetTooltipLink.addEventListener('dragleave', function() {
  if(currentTooltip) {
    currentTooltip.remove();
    currentTooltip = null;
  }
});

// 拖拽结束后强制清理tooltip
document.addEventListener('mouseup', function() {
  if(currentTooltip) {
    currentTooltip.remove();
    currentTooltip = null;
  }
});

这个方案不依赖原有tooltip逻辑，兼容性更强，适合复杂场景。

最后补充一句：你发现按住修饰键能正常显示tooltip，是因为Safari在按住这些键时，会把拖拽操作识别为“元素移动”而非标准HTML5拖拽，此时浏览器会允许hover事件正常触发，所以tooltip就能显示了。

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