Menu
I have the following React component using Material UI:
const MyButton = ({ warningText }) => ( <Tooltip title={warningText}> <Button>Do action</Button> </Tooltip> ) Currently, this shows an empty tooltip when warningText is undefined. Instead I would like to show no tooltip at all. Is there a way to conditionally surpress the tooltip in these cases?
Off course I could just use an if statement to not render the tooltip component, but this would lead to rather ugly code in my opinion.
243
To disable displaying tooltip on hover, we can use the disableHoverListener prop. The disableFocusListener prop lets us disable display tooltip when we focus on an element. disableTouchListener lets us disable tooltip display when we touch an element. to disable the focus and touch listeners.
Show Tooltip on disabled elementsAdd a disabled element like the button element into a div whose display style is set to inline-block . Set the pointer event as none for the disabled element (button) through CSS. Now, initialize the Tooltip for outer div element that holds the disabled button element.
Should be
<Tooltip title={warningText == null ? "" : warningText}> <Button>Do action</Button> </Tooltip> the docs say that it won't be displayed if the string length is zero.
https://material-ui.com/api/tooltip/
Tooltip title. Zero-length titles string are never displayed.
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
