I have a collection of buttons that I want to either disable or hide the default tooltip generated by the title attribute in the
<Button title='test'></Button>I have come across suggestions to use CSS pointer-events to disable the hover tooltip, but this also disables the button click functionality. Like so:
<Button title='test' style={{pointer-events: none}}></Button>I haven't found any solutions on how to remove the title attribute from a button in a React component like using removeAttr('title'). Therefore, I decided to explore hiding the HTML Tooltip content box and text by styling the tooltip border, text, and background color to white, for example:
const buttonStyle = {
hover: {
color: '#fff', backgroundColor: '#fff'
}
}
I've experimented with both the 'hover:' and '&:hover': {} methods to set the background to white in order to conceal the HTML tooltip, but the styling doesn't seem to take effect.
<Button title='test' style={buttonStyle}></Button>
So far, I have had no success and removing the title attribute from the button control is not feasible.