Show a popup near mouse pointer when mouse is over there on a particular control.

Posted by Ndebata under ASP.NET category on | Points: 40 | Views : 29774
In this I am getting the mouse position using jquery, then showing / hiding a div control on mouse events.
ASPX Page Content

<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function ShowDiv() {
document.getElementById('hdndiv').style.cssText = 'display: block; position:absolute; left:' + posx + 'px;top:' + posy + 'px;';
function HideDiv() {
document.getElementById('hdndiv').style.cssText = 'display: none;';
var posx, posy;
jQuery(document).ready(function () {
$(document).mousemove(function (e) {
posx = e.pageX + 10;
posy = e.pageY + 20;
<form id="form1" runat="server">
<asp:Label ID="Label1" Font-Bold="true" runat="server" Text="Hello" ></asp:Label>
<div id="hdndiv" style="display: none;">
<asp:Panel runat="server" BackColor="#F7F6F6" BorderColor="Red" BorderStyle="Solid" BorderWidth="1">
Welcome to DotnetFunda.

in the page intialisation just add the attributes to control where you want mouse over message

protected override void OnInit(EventArgs e)
Label1.Attributes.Add("onmouseenter", "ShowDiv()");
Label1.Attributes.Add("onmouseout", "HideDiv()");


Comments or Responses

Login to post response