REACT: conditionally rendering a alert if field left blank - reactjs

Question

I have the following React form:
import React from 'react';
export default class ChatBar extends React.Component {
mySubmitHandler = event => {
event.preventDefault();
/* you can access the value as below */
const inputName = this.refInputName.value;
const inputEmail = this.refInputEmail.value;
const inputMessage = this.refInputMessage.value;
// const inputStamp = this.convertDate(new Date())
const message = {name: inputName, email: inputEmail, content: inputMessage, stamp: inputStamp}
this.props.addMessage(message)
this.refInputMessage.value = ""
}
render() {
return (
<div>
<h4>Leave a Comment</h4>
<form onSubmit={this.mySubmitHandler}>
<label>Your name
<input
type="text"
name="name"
ref={(node) => (this.refInputName = node)}
/>
</label>
<label>Your email
<input
type="text"
name="email"
ref={(node) => (this.refInputEmail = node)}
/>
</label>
<label>Your message
<textarea ref={(node) => (this.refInputMessage = node)} />
</label>
<br />
<input className="submit-button" type="submit" value="Submit comment" />
</form>
</div>
)
};
};
I need to create a way so that when an input is left black and either submitted or hovered over, it creates a "tool tip" alerting the user the field has been left blank (see attached image). I have tread fooling around with onHover, onClick and onSubmit handlers to render some state of tool tip being "true" and conditionally render the toolTip div however it does not seem to be working and I am rather lost, now starting from scratch again.
Any help is greatly appreciated =)

Answer 1

I recommend react-valida-hook, it's really simple to use, you can add personalized messages, the only thing you need to do is pass the error.
Example:
const displayError = (errs) => {
if (errs.indexOf('required') !== -1) {
return '*Super important required field';
}
if (errs.indexOf('minLength') !== -1) {
return '*Too short man!';
}
if (errs.indexOf('isEmail') !== -1) {
return '*That looks wrong';
}
return '';
};
<div className="errors">
// I use a variable to show only errors wen form is submitted
{submitted && displayError(validation.errors.firstName)}
</div>

Answer 2

You can make two custom CSS class for visibility: hidden, ect.
Then render the toolTip div like such:
<div className="tool-tip" style={this.state.showTip ? visible : hidden}>testing </div>