Javascript如何在悬停到图像时显示消息

Question

我可以用下面的代码显示图像警告.如果用户名或密码为空.

如果鼠标悬停在警告图像上,我想显示消息.

例如;

"UserName不能为空!" 用户名和"密码不能为空!" 密码.

使用鼠标在何处编辑显示消息悬停在图像上？

我的Javascript代码:

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" />');
  }
}

我的Html代码:

<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 1

为什么要为自己复杂化......它如此简单......使用tag 的title属性<img>来显示鼠标悬停消息!!

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