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

Question

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

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

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

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

Answer 1

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

有

这样的选项

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

我认为interactive={true}最符合您的需求

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

Answer 2

应该是

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

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

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

Tooltip title. Zero-length titles string are never displayed.

Answer 3

如果您正在寻找手动定制...

根据documentation，您可以使用openprop和鼠标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>

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

Conditionally activate Material UI tooltip?

javascript

tooltip

reactjs

material-ui