This could be easily done using the title
HTML attribute.
title Attribute
The title attribute belongs to the Global Attribute. It allows to specify extra information about an element. This information is shown as a tooptip text when the mouse moves over the element.
<input type="text" name="yourname" required title="You changed it !!"/>
If its something related to the text showed after validation. For that you could use the function setCustomValidity
along with an event Handler .
Here we would use the event Handler oninvalid
.
Your code could be written as :
<input type="text" name="yourname" required oninvalid="this.setCustomValidity('Yo! You changed it')" oniput="this.setCustomValidity('Yo! You changed it')" title="test"/>