This article describes how you can implement dynamic AJAX tooltips on any element on your web page. There are quite a few good third party AJAX frameworks available out there that provide Tooltip control and they do a very good job. A lot of these frameworks reply on you creating web serivices or putting some special attributes on your methods on server side so that these frameworks can treat them special. I am not arguing if those frameworks are good or bad in their approach. I will simply present you discussion on how you can utilize Yahoo User Interface (YUI) open source java script library to accomplish the task. I will leave it to you to visit Yahoo's web site to get more details on YUI.

AJAX Request For Data

The purpose of this tooltip is to get data from server using asynchronous request (AJAX). YUI provides one simple method to accomplish this task, YAHOO.util.Connect.asyncRequest. Following code shows how this method gets used to get the response from server.

function sendTooltipDataRequest(_elId, _mouseX, _mouseY, _sInputData)
{
 var tooltipDataCallBackArgs = {
  success:tooltipDataSuccess,
  failure:tooltipDataFailure,
  argument: {elId:_elId,mouseX:_mouseX,mouseY:_mouseY}
 };
			
 var sUrl = "http://localhost/AjaxToolTipSample/SiteData.aspx?CallName=tooltip&input=" + _sInputData;
 var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, tooltipDataCallBackArgs);
}
							

Let me explain what different parameters for this method means.

• First parameter indicates the type of HTTP request that will be sent to server. It can be GET or POST.
• Second parameter specified URL where request needs to be sent. This URL does not have to be a web service request. This can be any URL that is capable of sending HTTP response. You can utilize query string to specify request specific data. For example my example implements a REST API to get toop tip data. First query string parameter is the name of the call for server side to identify what action to take and second parameter is the input data for that call.
• Third parameter is where you specify your call back functions when async request finishes. You can pass in a java script object with property names success and failure pointing to client java script functions to call when async request succeeds to fails. Any addiotinal parmater that you want to be returned with response, put them in argument property of the javascript object. In my example I have created a object type tooltipDataCallBackArgs that gets passed with each AJAX request.

Handling Response

When async request returns with success or failure, it calls back into the functions that you speciifed in request. Following code snippet shows how success response gets handled to render tooltip data.

function tooltipDataSuccess(oResp)
{
 displayAndPositionTooltip(oResp.argument.elId, oResp.responseText, oResp.argument.mouseX, oResp.argument.mouseY);
}							
							

You can see how response has returned the asdditional arguments that were specified in request.

Sample Project

Sample project with this article demonstrates a very simple implementation of these concepts to display tool tip when you move mouse over an image. The implementation does not have any sophisticated implementation to position the tooltip based on poisiton and size of anchor element. And the project is a Visual Studio 2008 project. But you can drop the files in your VS2005 project to get it to work.