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

Posted by Ndebata under ASP.NET category on 4/30/2011 | Points: 40 | Views : 33860

Post Code |

Search Codes |

Code Home

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">
    <title></title>
    <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;
            });
        })
    </script>
</head>
<body>
    <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.
        </asp:Panel>
    </div>
    </form>
</body>
</html>

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


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

Thanks,
Debata

Alert Moderator

Bookmark It

Comments or Responses

Latest Code Snipptes