添加跨度时工具提示无法正常工作

Question

我正在使用一个工具提示，当按钮被禁用时，它会在悬停时显示。 由于按钮的 css 变得扭曲，我使用 span 来消除扭曲。添加跨度后，工具提示无法正常工作。当我将鼠标悬停在按钮上时，有时它不会在鼠标移开时消失。我该怎么办？ 在不使用 span 的情况下使用工具提示时，有没有办法保留 css？ 这是代码：

const isEnable = true
<Tooltip placement="bottom" title="hello qwerty" trigger={'hover'} open={!isEnable}> 
  <span> 
    <Button disabled={!isEnable} > 
      <Space> 
         <span>Hello</span> 
      </Space> 
    </Button> 
  </span> 
</Tooltip>

第 3 行跨度导致问题

Answer 1

您可以修改如下代码：

const isEnable = true;

<Tooltip placement="bottom" title="hello qwerty" trigger={'hover'} open={!isEnable}> 
  <Button disabled={!isEnable} style={{ display: 'inline-block' }}> 
    <Space> 
       <span>Hello</span> 
    </Space> 
  </Button> 
</Tooltip>

display: inline-block 属性通过 style 属性直接应用于 Button 组件。这将允许按钮保持其样式，同时仍允许工具提示正常工作。