如何在禁用按钮时启用悬停工具提示?

问题描述 投票:0回答:0

我试图让工具提示仅在我将鼠标悬停在禁用的按钮上时可见。启用该按钮后,不应看到工具提示。我正在使用 React 和 antd。

这是我写的代码,

import React from 'react';
import { Button, Tooltip, Space } from 'antd';
const text = <span>prompt text</span>;
const isEnable = false
const App = () => (
<div>
  <Space>
     <Button>Hi</Button>
     <Tooltip placement="bottom" title={text} trigger={'hover'} visible={!isEnable}>
       <span>
         <Button disabled={!isEnable} >
           <Space>
             <span>Hello</span>
           </Space>
         </Button>
       </span>
      </Tooltip>
  </Space>
</div>
);
export default App;

isEnable 是一个变量,它在按钮启用和禁用时保持跟踪。在这里,我可以在启用按钮时隐藏工具提示。当按钮被禁用时,我尝试触发悬停以使工具提示在悬停时可见,但这不起作用。有没有办法让工具提示在悬停时可见并在鼠标离开按钮后很快消失?

javascript css reactjs tooltip antd
© www.soinside.com 2019 - 2024. All rights reserved.