Javascript Как показать сообщение при наведении на изображение

Question

Я могу показать предупреждение изображения с помощью ниже кода. Если имя пользователя или пароль пуст.

Я хочу показать сообщение, если мышь при наведении на предупреждающий образ.

Для примера;

"UserName не может быть пустым!" для 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

Почему пойти и усложнять вещи для себя .... Его так просто ... использовать название атрибут из <img> тег для отображения сообщений наведите курсор мыши!

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

Answer 2

Вы можете сделать это очень легко с помощью JQuery.

http://api.jquery.com/mouseover/

Answer 3

вы можете рассмотреть возможность использования подсказки виджет jqueryUI.

См: http://jqueryui.com/tooltip/

в качестве альтернативы использовать событие парения: http://api.jquery.com/hover/

Answer 4

$(function(){ 
$("#showwarning1").on('mouseover', function(){ 
    //show error message to the user 
    console.log("UserName Can Not Be Empty!"); 

}); 

$("#showwarning2").on('mouseover', function(){ 
    //show error message to the user 
    console.log("Password Can Not Be Empty!"); 
}); 
}); 

Answer 5

Вы можете использовать атрибут OnMouseOver вызвать ту же функцию, так что он будет делать то же самое, при наведении курсора мыши, как по щелчку.

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" />'); 
    } 
} 
<input type="text" id="UsernameTextBox" name="UsernameTextBox"/> 
    <input type="text" id="PasswordTextBox" name="PasswordTextBox"/> 
    <input type="button" onclick="LoginButonOnclick()" onmouseover="LoginButonOnclick()" value="Enter"/> 

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

В качестве альтернативы, вы можете также использовать JQuery