Create Tooltip dynamically by AJAX and WebService

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, just like the solution in following link:

http://lancezhang.wordpress.com/2008/12/04/create-tooltip-dynamically/

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.

If we are using ASP.NET AJAX, the same effect can be achieve by AJAX Page Method easily, just like the solution in following link:

http://lancezhang.wordpress.com/2009/01/12/create-tooltip-dynamically-by-ajax-pagemethod/

And we can also use WebService and AJAX to achieve the same goal.

Ok, here we go:

Step 1:

First, let’s add the WebService reference to our page:
<asp:ScriptManager ID=“ScriptManager1″ runat=“server”>
    <Services>
        <asp:ServiceReference Path=“~/tooltiptest3.asmx” />
    </Services>
</asp:ScriptManager>

Step 2:

Let’s create the WebService for create tooltip message:

C#: tooltiptest3.asmx
<%@ WebService Language=“C#” Class=“tooltiptest3″ %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class tooltiptest3 : System.Web.Services.WebService {

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

}

Step 3:

Complete the JavaScript code to invoke the page method:
<script type=“text/javascript”>
var positionX;
var positionY;

    function onSuccess(value) {
        document.getElementById(‘tooltipDiv’).innerHTML = value;
    }

    function onFailed(ex, ctx, methodName) {
        alert(ex.get_exceptionType());
    }

    function HandleMouseOut() {
        document.getElementById(‘tooltipDiv’).style.display = ‘none’;
        document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”;
    }

function HandleMouseOver(Label) {

tooltiptest3.GetTooltip(Label.innerText, onSuccess, onFailed);

        positionX = event.clientX;
        positionY = event.clientY;
        document.getElementById(‘tooltipDiv’).style.left = positionX;
        document.getElementById(‘tooltipDiv’).style.top = positionY;
        document.getElementById(‘tooltipDiv’).style.display = ‘block’;
    }


</script>

OK, the full page code is following:
<%@ Page Language=”C#” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

</script>

        function onSuccess(value) {
            document.getElementById(‘tooltipDiv’).innerHTML = value;
        }

        function onFailed(ex, ctx, methodName) {
            alert(ex.get_exceptionType());
        }

        function HandleMouseOut() {
            document.getElementById(‘tooltipDiv’).style.display = ‘none’;
            document.getElementById(‘tooltipDiv’).innerHTML = “<img src=’loading.gif’/>”;
        }

function HandleMouseOver(Label) {

tooltiptest3.GetTooltip(Label.innerText, onSuccess, onFailed);

            positionX = event.clientX;
            positionY = event.clientY;
            document.getElementById(‘tooltipDiv’).style.left = positionX;
            document.getElementById(‘tooltipDiv’).style.top = positionY;
            document.getElementById(‘tooltipDiv’).style.display = ‘block’;
        }


    </script>

Original Source:
http://lancezhang.wordpress.com

Posted at 09:42:17 am | Permalink | Posted in Html Tutorials

Related Stuff

MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.

Create Tooltip dynamically by AJAX and WebService ...

Related Stuff

Top Stuff

About Ajaxlines

Search

Topics