React Ant Tooltip onHover Select 值

Question

我有带值的 Select 组件，当用户选择多个值时我需要实现逻辑，它会在 select 组件中显示为逗号分隔，悬停时会在工具提示中查看完整列表.使用 @ant-desing 获取它。我在 Select 组件道具中使用 onMouseEnter 函数，鼠标悬停时调用此函数 enter.But，该函数不会 return 工具提示组件

Sandbox

  const tooltipValue = ["Mercedes", "BMW", 'Audi'].join(", ");
  const value = ["Mercedes", "BMW", 'Audi'];

  const renderToolTip = () => {
    console.log("success"); 

    return <Tooltip placement="topLeft" title={tooltipValue} />;
  };

  return (
    <div>
      <Tooltip placement="topLeft" title={tooltipValue}>
        <Button>Tooltip</Button>
      </Tooltip>

      <Select
        mode="multiple"
        value={value}
        style={{ marginLeft: 20 }}
        onMouseEnter={renderToolTip}
      />
    </div>
  );

Answer 1

不确定我是否完全理解你的意思，但也许是这样的？

尝试使用 maxTagCount 和 maxTagPlaceholder

https://stackblitz.com/edit/react-wlvn1u?file=src/App.js

import React from "react";
import "./style.css";
import "antd/dist/antd.css";
import { Tooltip, Button, Select } from "antd";

export default function App() {

  const tooltipValue = ["Mercedes", "BMW", 'Audi'].join(", ");
  const value = ["Mercedes", "BMW", 'Audi'];

  const renderToolTip = () => {
    console.log("success"); 

    return <Tooltip placement="topLeft" title={tooltipValue} />;
  };

  return (
    <div>
      <Tooltip placement="topLeft" title={tooltipValue}>
        <Button>Tooltip</Button>
      </Tooltip>

      <Select
        mode="multiple"
        value={value}
        style={{ marginLeft: 20 }}
        onMouseEnter={renderToolTip}
        maxTagCount={0}
        maxTagPlaceholder={<Tooltip title={value.map(v=><div>{v}</div>)}>{tooltipValue}</Tooltip>}
      />
    </div>
  );
}

React Ant Tooltip onHover Select 值

React Ant Tooltip onHover Select values

javascript

reactjs

ant-design-pro