使用react-dnd拖拽时title属性提示框不显示的问题

我之前也碰到过一模一样的react-dnd和原生tooltip冲突的问题，拖拽完hover元素完全没反应，点一下页面才恢复，太闹心了！咱们先搞清楚原因，再给两个靠谱的解决方案。

问题根源 #

浏览器的原生title提示框触发逻辑是绑定在元素的正常交互状态上的：当元素处于可hover状态，且鼠标停留一段时间后才会显示。但react-dnd在拖拽过程中，会修改DOM的事件捕获链、元素的焦点状态，甚至临时改变元素的渲染层级——拖拽结束后，元素的事件上下文没有及时回到正常状态，导致浏览器的hover监听没有被正确触发，自然就不显示title了。

解决方案1：自定义Tooltip（推荐） #

原生title的行为太依赖浏览器，不好控制，不如换成自定义的tooltip组件，完全掌控显示时机。比如自己写一个简单的：

代码示例 #

import { useState } from 'react';
import { useDrag } from 'react-dnd';

const DraggableItem = ({ item }) => {
  const [showTooltip, setShowTooltip] = useState(false);
  // react-dnd的拖拽钩子
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'ITEM',
    item: { id: item.id },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      // 拖拽状态下不显示tooltip，避免拖拽过程中干扰
      onMouseEnter={() => !isDragging && setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
      style={{ 
        opacity: isDragging ? 0.5 : 1,
        position: 'relative',
        padding: '8px',
        border: '1px solid #ccc',
        margin: '4px'
      }}
    >
      {item.name}
      {/* 自定义tooltip */}
      {showTooltip && (
        <div 
          style={{
            position: 'absolute',
            top: '100%',
            left: 0,
            marginTop: '4px',
            background: '#333',
            color: '#fff',
            padding: '4px 8px',
            borderRadius: '4px',
            fontSize: '14px',
            zIndex: 1000
          }}
        >
          {item.description}
        </div>
      )}
    </div>
  );
};

这个方案的好处是：可以和react-dnd的isDragging状态联动，拖拽过程中干脆不显示tooltip，避免拖拽时的干扰；而且完全自定义样式，比原生title好看多了。

解决方案2：修复原生title的触发逻辑（hack式） #

如果你一定要用原生title属性，可以在拖拽结束后手动触发元素的hover事件，让浏览器重新激活title的监听：

代码示例 #

import { useDrag } from 'react-dnd';

const DraggableItem = ({ item }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'ITEM',
    item: { id: item.id },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    // 拖拽结束的回调
    end: (_, monitor) => {
      // 获取拖拽结束时元素的位置
      const sourceOffset = monitor.getSourceClientOffset();
      if (sourceOffset) {
        // 找到当前位置的元素
        const targetElement = document.elementFromPoint(sourceOffset.x, sourceOffset.y);
        if (targetElement) {
          // 手动触发mouseover事件，让浏览器重新识别hover状态
          targetElement.dispatchEvent(new MouseEvent('mouseover', { 
            bubbles: true,
            cancelable: true
          }));
        }
      }
    }
  }));

  return (
    <div
      ref={drag}
      title={item.description}
      style={{ 
        opacity: isDragging ? 0.5 : 1,
        padding: '8px',
        border: '1px solid #ccc',
        margin: '4px'
      }}
    >
      {item.name}
    </div>
  );
};

这个方法是模拟浏览器的hover事件，强制让title的触发逻辑重新生效。不过要注意，elementFromPoint可能会找到其他元素，所以稳定性不如自定义tooltip，适合快速临时修复。

总结 #

优先推荐自定义tooltip方案，不仅解决了问题，还能提升交互体验；如果必须用原生title，再考虑第二种hack方法。

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