user2791307 user2791307 - 1 month ago 8
jQuery Question

Javascript How to show message on hover to image

I can show image warning with below codes.If username or password is empty.

I want to show message , if mouse on hover to warning image.

For Example;

"UserName Can Not Be Empty!" for UserName and "Password Can Not Be Empty!" for Password.

Where to edit for showing message on hover to image with mouse?

My Javascript Code:

function LoginButonOnclick() {
var data= {
UserName: $('#UserNameTextBox').val(),
Password: $('#PasswordTextBox').val(),
};
if (data.UserName== null) {
$("#showwarning1").html('<img src="~/Image/warning.png">');
}
if (data.Password== null) {
$("#showwarning2").html('<img src="~/Image/warning.png" />');
}
}


My Html Code:

<input type="text" id="UsernameTextBox" name="UsernameTextBox"/>
<input type="text" id="PasswordTextBox" name="PasswordTextBox"/>
<input type="button" onclick="LoginButonOnclick()" value="Enter"/>

<div id="showwarning1"></div>
<div id="showwarning2"></div>

Answer Source

Why to go and complicate things for yourself.... Its so simple... use the title attribute of <img> tag to show mouse hover messages!!

<img src="~/Image/warning.png" title="Password is empty!!"/>