我有以下使用 Material UI 的 React 组件:
const MyButton = ({ warningText }) => (
<Tooltip title={warningText}>
<Button>Do action</Button>
</Tooltip>
)
目前,当
warningText
未定义时,这会显示一个空的工具提示。相反,我想根本不显示任何工具提示。在这些情况下有没有办法有条件地抑制工具提示?
当然,我可以只使用 if 语句来不渲染工具提示组件,但在我看来,这会导致相当难看的代码。
应该是
<Tooltip title={warningText == null ? "" : warningText}>
<Button>Do action</Button>
</Tooltip>
文档说如果字符串长度为零,则不会显示。
https://material-ui.com/api/tooltip/
工具提示标题。零长度标题字符串永远不会显示。
您可以使用
disableHoverListener
道具,如下所示:
<Tooltip
title={warningText}
disableHoverListener={!warningText}
>
<Button>Do action</Button>
</Tooltip>
https://mui.com/material-ui/api/tooltip/#Tooltip-prop-disableHoverListener
如果您想手动尝试自定义,可以尝试使用以下解决方案:
根据 文档,您可以使用
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 并不是一个完美的组件,也不是很直接,这个解决方案对我有用,但可能不适用于你的情况,我会尝试把它拿出来,你可以尝试让它在你身上发挥作用。
如果它不适合你,请发表评论,我会尽力帮助。
您应该看看https://material-ui.com/api/tooltip/
有这样的选项
我认为
interactive={true}
应该最适合您的需求
<Tooltip title={warningText} interactive={!warningText}>...</Tooltip>