Ant Design中Steps结合Tooltip失效问题及解决方案求助

问题描述 #

在Ant Design的Steps组件中尝试结合Tooltip实现鼠标悬停步骤时显示简要说明，但直接将Tooltip嵌套在Step外层后功能失效，自定义Tooltip组件也无法解决。这是Ant Design的已知开放问题。

• 当前效果：鼠标悬停步骤时无Tooltip弹出
• 预期效果：鼠标悬停步骤时显示对应步骤的简要说明

原测试代码：

import React from "react";
import ReactDOM from "react-dom";
import { Steps, Tooltip } from "antd";

const { Step } = Steps;

const stepStyle = {
  marginBottom: 60,
  boxShadow: "0px -1px 0 0 #e8e8e8 inset"
};

class Demo extends React.Component {
  state = {
    current: 0
  };

  onChange = current => {
    console.log("onChange:", current);
    this.setState({ current });
  };

  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          style={stepStyle}
        >
          <Tooltip title="test">
            <Step status="finish" title="finish 1" />
          </Tooltip>
          <Step status="finish" title="finish 2" />
          <Step status="process" title="current process" />
          <Step status="wait" title="wait" disabled />
        </Steps>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

可行实现方案 #

方案一：将Tooltip嵌套在Step的title属性中 #

Steps组件的title支持传入React节点，直接把Tooltip放在title内部，既能保留步骤原有交互逻辑，又能实现悬停提示：

import React from "react";
import ReactDOM from "react-dom";
import { Steps, Tooltip } from "antd";

const { Step } = Steps;

const stepStyle = {
  marginBottom: 60,
  boxShadow: "0px -1px 0 0 #e8e8e8 inset"
};

class Demo extends React.Component {
  state = {
    current: 0
  };

  onChange = current => {
    console.log("onChange:", current);
    this.setState({ current });
  };

  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          style={stepStyle}
        >
          <Step 
            status="finish" 
            title={
              <Tooltip title="这是已完成步骤1的说明">
                <span>finish 1</span>
              </Tooltip>
            } 
          />
          <Step 
            status="finish" 
            title={
              <Tooltip title="这是已完成步骤2的说明">
                <span>finish 2</span>
              </Tooltip>
            } 
          />
          <Step 
            status="process" 
            title={
              <Tooltip title="这是当前进行中的步骤说明">
                <span>current process</span>
              </Tooltip>
            } 
          />
          <Step 
            status="wait" 
            title={
              <Tooltip title="这是等待执行的步骤说明">
                <span>wait</span>
              </Tooltip>
            } 
            disabled 
          />
        </Steps>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

方案二：自定义步骤内容（适用于整个步骤区域触发提示的场景） #

如果需要鼠标悬停整个步骤区域（图标+标题）都触发Tooltip，可通过Steps.Step的children属性自定义内容，同时匹配步骤状态样式：

import React from "react";
import ReactDOM from "react-dom";
import { Steps, Tooltip, Typography } from "antd";
import { CheckCircleOutlined, ClockCircleOutlined, LoadingOutlined } from "@ant-design/icons";

const { Step } = Steps;
const { Text } = Typography;

const stepStyle = {
  marginBottom: 60,
  boxShadow: "0px -1px 0 0 #e8e8e8 inset"
};

// 根据步骤状态返回对应图标
const getStepIcon = (status) => {
  switch(status) {
    case "finish":
      return <CheckCircleOutlined />;
    case "process":
      return <LoadingOutlined spin />;
    case "wait":
      return <ClockCircleOutlined />;
    default:
      return null;
  }
};

class Demo extends React.Component {
  state = {
    current: 0
  };

  onChange = current => {
    console.log("onChange:", current);
    this.setState({ current });
  };

  renderStepItem = (status, title, tooltipText, disabled = false) => {
    const icon = getStepIcon(status);
    return (
      <Tooltip title={tooltipText}>
        <Step disabled={disabled}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", cursor: disabled ? "not-allowed" : "pointer" }}>
            <span style={{ color: status === "process" ? "#1890ff" : status === "finish" ? "#52c41a" : "#d9d9d9", marginBottom: 8 }}>
              {icon}
            </span>
            <Text style={{ color: status === "process" ? "#1890ff" : status === "finish" ? "#52c41a" : "#d9d9d9" }}>
              {title}
            </Text>
          </div>
        </Step>
      </Tooltip>
    );
  };

  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps
          type="navigation"
          size="small"
          current={current}
          onChange={this.onChange}
          style={stepStyle}
        >
          {this.renderStepItem("finish", "finish 1", "这是已完成步骤1的完整说明")}
          {this.renderStepItem("finish", "finish 2", "这是已完成步骤2的完整说明")}
          {this.renderStepItem("process", "current process", "这是当前进行中的步骤完整说明")}
          {this.renderStepItem("wait", "wait", "这是等待执行的步骤完整说明", true)}
        </Steps>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, document.getElementById("container"));

方案说明 #

• 方案一实现简单，适合仅需要标题悬停提示的场景，完全复用Steps组件原有样式和交互逻辑。
• 方案二适合需要整个步骤区域（图标+标题）都触发提示的场景，通过自定义内容实现，需手动匹配步骤状态的样式。

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