有条件地激活 Material UI 工具提示？

Question

我有以下使用 Material UI 的 React 组件：

const MyButton = ({ warningText }) => (
    <Tooltip title={warningText}>
        <Button>Do action</Button>
    </Tooltip>
)

目前，当

warningText

未定义时，这会显示一个空的工具提示。相反，我想根本不显示任何工具提示。在这些情况下有没有办法有条件地抑制工具提示？

当然，我可以只使用 if 语句来不渲染工具提示组件，但在我看来，这会导致相当难看的代码。

Answer 1

应该是

 <Tooltip title={warningText == null ? "" : warningText}>
        <Button>Do action</Button>
 </Tooltip>

文档说如果字符串长度为零，则不会显示。

https://material-ui.com/api/tooltip/

工具提示标题。零长度标题字符串永远不会显示。

Answer 2

您可以使用

disableHoverListener

道具，如下所示：

<Tooltip
  title={warningText}
  disableHoverListener={!warningText}
>
  <Button>Do action</Button>
</Tooltip>

https://mui.com/material-ui/api/tooltip/#Tooltip-prop-disableHoverListener

Answer 3

如果您想手动尝试自定义，可以尝试使用以下解决方案：

根据 文档，您可以使用

open

prop

和鼠标

events

手动处理。

在下面的场景中，我们将使用

state

设置当鼠标移到

element

上时显示工具提示，并且我们还将使用

text &&

来断言

text

有值，这样可以防止当

text

为

undefined

时显示工具提示。

const [showTooltip, setShowTooltip] = useState(false);
<Tooltip
    open={text && showTooltip}        
    onMouseEnter={() => { setShowTooltip(true) }}
    onMouseLeave={() => { setShowTooltip(false) }}
    placement="top" title={text}
>
    <div>
        {text}
    </div>
</Tooltip>

注意，mui-tooltip 并不是一个完美的组件，也不是很直接，这个解决方案对我有用，但可能不适用于你的情况，我会尝试把它拿出来，你可以尝试让它在你身上发挥作用。

如果它不适合你，请发表评论，我会尽力帮助。

Answer 4

您应该看看https://material-ui.com/api/tooltip/

有这样的选项

• 禁用焦点监听器
• 禁用悬停监听器
• 禁用触摸监听器
• 互动

我认为

interactive={true}

应该最适合您的需求

<Tooltip title={warningText} interactive={!warningText}>...</Tooltip>