Условно активировать всплывающую подсказку Material UI?

Question

У меня есть следующий компонент 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 /подсказка /

Заголовок подсказки.Строка заголовков нулевой длины никогда не отображается.

Answer 2

Вы должны взглянуть на https://material -ui.com / api / tooltip /

Существуют варианты, такие как

• disableFocusListener
• disableHoverListener
• disableTouchListener
• интерактивный

Я думаю, interactive={true} должен наилучшим образом соответствовать вашим потребностям

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