React Tooltip组件在父容器中max-width不生效问题排查

原组件代码 #

import { IProps } from "./type";
import Image from "next/image";
import styles from "./style.module.css";
import { useState } from "react";
import classNames from "classnames";

const Tooltip = ({ text, position }: IProps) => {
  const [visible, setVisible] = useState(false);

  const handleVisibility = () => {
    setVisible(!visible);
  };
  return (
    <div className={styles.wrapper}>
      <Image
        src="/icons/info.png"
        width={24}
        height={24}
        alt="info icon"
        onMouseEnter={handleVisibility}
        onMouseLeave={handleVisibility}
        className={styles.icon}
      />
      {visible ? (
        <p
          className={classNames(styles.content, {
            [styles.right]: position === "RIGHT",
          })}
        >
          {text}
        </p>
      ) : null}
    </div>
  );
};

export default Tooltip;

问题根源 #

原CSS中，.content.right仅设置right:10px，未明确左侧定位逻辑，导致Tooltip宽度被父容器（.wrapper，宽度仅由24px图标决定）限制，无法触发max-width:400px；放入flex容器时，这个宽度限制会被进一步放大。

修改后的CSS代码 #

.wrapper {
  position: relative;
  display: inline-block; /* 保持宽度与图标一致，避免被父容器拉伸 */
}

.content {
  position: absolute;
  z-index: 9999;
  background-color: hsl(0, 0%, 20%);
  color: #fff;
  padding: 12px;
  line-height: 1.4rem;
  box-shadow: #000 1px 1px 1px;
  font-size: 0.875rem;
  border-radius: 4px;
  width: auto;
  max-width: 400px;
  white-space: normal; /* 确保长文本自动换行 */
  /* 左对齐：从图标右侧向外扩展 */
  left: 100%;
  margin-left: 4px;
}

.content.right {
  /* 右对齐：从图标左侧向外扩展 */
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
}

.icon {
  cursor: pointer;
}

修改说明 #

1. .wrapper添加display: inline-block：确保容器宽度仅匹配图标尺寸，不会被父flex容器强制拉伸。
2. 重写定位逻辑：
   • 默认左对齐：用left:100%让Tooltip从图标右侧开始显示，配合margin-left:4px控制间距，此时Tooltip宽度不受.wrapper限制，可自由扩展到max-width:400px。
   • 右对齐：用right:100%让Tooltip从图标左侧开始显示，替换原right:10px，避免宽度被父容器限制。
3. 新增white-space: normal：保证长文本自动换行，不会超出max-width范围。

修改后，Tooltip在任意容器中都能实现短文本自适应宽度、长文本限制在400px内的效果，同时不会出现偏移过度的问题。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai