LanceZhang’s Blog

Dear friends, Welcome to my blog.

Create Tooltip dynamically by ASP.NET Callback

Use Pop up div by JavaScript or AJAX Control Toolkit’s Hover Menu control can create a Tooltip easily.

However, if we need to create the content of tooltip dynamically by the Server-Side code, we can use the ICallbackEventHandler to achieve the faing goal.

Please try the following demo, when you move the mouse on the text, the related image and text which will be created on the code-behind show up in the tooltip after 1 second. during the loading process, a “loading” gif picture will display in the tooltip box.

Ok, here we go:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”tooltiptest.aspx.cs” Inherits=”tooltiptest” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=http://www.w3.org/1999/xhtml&#8221;>
<head id=“Head1” runat=“server”>

    <script type=“text/javascript”>
        var positionX;
        var positionY;
        function HandleMouseOver(Label) {
            CallTheServer(Label.innerText, );
            positionX = event.clientX;
            positionY = event.clientY;
            document.getElementById(‘tooltipDiv’).style.left = positionX;
            document.getElementById(‘tooltipDiv’).style.top = positionY;
            document.getElementById(‘tooltipDiv’).style.display = ‘block’;
        }
        function HandleMouseOut() {
            document.getElementById(‘tooltipDiv’).style.display = ‘none’;
            document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”;
        }
        function ReceiveServerData(arg, context) {
            document.getElementById(‘tooltipDiv’).innerHTML = arg;
        }
    </script>

    <style type=“text/css”>
        .style1
        {
            border: 1px solid #96C2F1;
            background-color: #EFF7FF;
            position: absolute;
            display: none;
            filter: alpha(opacity=80);
            opacity: 0.80;
        }
    </style>
    <title>Untitled Page</title>
</head>
<body style=“font-family: Calibri; font-size: 15px;”>
    <form id=“form1” runat=“server”>
    <div id=“tooltipDiv” class=“style1”>
    <img src=“loading.gif”/>
    </div>
    <div>
        <asp:Label ID=“Label1” runat=“server” Text=http://forums.asp.net/Themes/FAN/style/i/logo.png&#8221;
            onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label>
        <br />
        <br />
        <br />
        <br />
        <asp:Label ID=“Label2” runat=“server” Text=http://forums.asp.net/Themes/fan/images/roleicons/a874d69e-0ac8-4b80-acc7-512767e281f6.gif&#8221;
            onmouseout=“HandleMouseOut()” onmouseover=“HandleMouseOver(this)”></asp:Label>
    </div>
    </form>
</body>
</html> 

 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class tooltiptest : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
    string tooltip;

    public void RaiseCallbackEvent(String eventArgument)
    {
        string filename = eventArgument;
        tooltip = GetTooltip(filename);
    }

    public string GetCallbackResult()
    {
        return tooltip;
    }

    protected string GetTooltip(string imagename)
    {
        System.Threading.Thread.Sleep(1000);
        return @”this is just a demo: <br><img src='” + imagename+“‘/>”;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        String cbReference = Page.ClientScript.GetCallbackEventReference(this, “arg”, “ReceiveServerData”, “context”);
        String callbackScript = “function CallTheServer(arg, context) {“ + cbReference + “; }”;
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), “CallTheServer”, callbackScript, true);
    }
}

December 4, 2008 - Posted by | ASP.NET, ASP.NET AJAX | ,

4 Comments »

  1. GspAL5 flHsdt83Nncfooi61t

    Comment by margo | January 4, 2009 | Reply

  2. Wow really nice use of ICallbackEvent Handler, I am using this code in my client’s websites. Thanks for the code. I did write some articles on ICallback but i liked yours. Keep it up.
    My Callback Article:- http://aspdotnetmatters.blogspot.com/2010/08/icallback-event-handler.html

    Comment by ashish | August 16, 2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: