React Tooltip组件左右方向显示异常问题求助

问题原因 #

你的Tooltip组件在top/bottom方向显示正常，但left/right方向时提示框出现在目标元素内部，核心问题有三点：

• 基础.toolTip样式中默认设置了left: 50%和transform: translateX(-50%)，强制tooltip水平居中于父容器，和左右方向的定位规则冲突；
• 左右方向的箭头（::before伪元素）未做对应调整，依然保持水平居中，不符合视觉逻辑；
• hideTip函数误用clearInterval，应该用clearTimeout清除setTimeout创建的定时器。

修复方案 #

1. 修正CSS样式 #

调整基础样式和方向类的定位规则，同时适配左右方向的箭头位置：

.toolTipWrapper {
  display: inline-block;
  position: relative;
}

.toolTip {
  position: absolute;
  border-radius: 4px;
  padding: 6px;
  color: rgb(217, 212, 212);
  background: black;
  font-size: 14px;
  font-family: sans-serif;
  line-height: 1;
  z-index: 100;
  white-space: nowrap;
  /* 移除默认水平居中规则，交给方向类控制 */
}

.toolTip::before {
  content: " ";
  border: solid transparent;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

/* 上下方向：保持水平居中，定位到元素外侧 */
.toolTip.top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2px;
}

.toolTip.bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
}

/* 左右方向：改为垂直居中，定位到元素外侧 */
.toolTip.left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 2px;
}

.toolTip.right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 2px;
}

/* 适配不同方向的箭头位置和颜色 */
.toolTip.top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: black;
  border-width: 6px;
}

.toolTip.bottom::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: black;
  border-width: 6px;
}

.toolTip.left::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: black;
  border-width: 6px;
}

.toolTip.right::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: black;
  border-width: 6px;
}

2. 修正组件定时器逻辑 #

把hideTip函数里的clearInterval改为clearTimeout，并增加定时器存在性判断：

import React, { useState } from "react";
import styles from "./toolTip.module.css";

const ToolTip = ({
  delay,
  direction,
  content,
  children
}: {
  delay?: number;
  direction: "top" | "right" | "left" | "bottom";
  content: any;
  children: any;
}) => {
  let timeout: NodeJS.Timeout | undefined;
  const [directionClass] = useState(styles[direction]);
  const [active, setActive] = useState(false);

  const showTip = () => {
    timeout = setTimeout(() => {
      setActive(true);
    }, delay || 400);
  };

  const hideTip = () => {
    if (timeout) {
      clearTimeout(timeout);
      timeout = undefined;
    }
    setActive(false);
  };

  return (
    <div
      className={styles.toolTipWrapper}
      onMouseEnter={showTip}
      onMouseLeave={hideTip}
    >
      {children}
      {active && (
        <div className={`${styles.toolTip} ${directionClass}`}>
          {content}
        </div>
      )}
    </div>
  );
};

export default ToolTip;

修复说明 #

• 移除基础样式中的强制水平居中规则，让不同方向的类独立控制tooltip定位；
• 上下方向保留水平居中，左右方向改为垂直居中，确保tooltip出现在目标元素外侧；
• 为每个方向的箭头设置正确的位置和边框颜色，保证视觉一致性；
• 修正定时器清除错误，避免潜在内存泄漏风险。

内容的提问来源于stack exchange，提问作者Icat.main