Click here to Skip to main content
14,027,342 members
Click here to Skip to main content
Add your own
alternative version


39 bookmarked
Posted 7 Dec 2008
Licenced CPOL

ToolTip AJAX Client Control

, 7 Dec 2008
Rate this:
Please Sign up or sign in to vote.
A general purpose tooltip control using ASP.NET AJAX.


Many of you might have seen a tooltip as shown in above screenshot. The purpose of this article is to show how we can leverage the Microsoft ASP.NET AJAX framework to develop a general purpose AJAX ToolTip Client Control. You can associate this control to any of the commonly used controls such as textboxes, images etc., to display appropriate tooltips.


Recently, I was exploring the ASP.NET AJAX features, and came across an excellent book: ASP.NET In Action, by Alessandro Gallo. I feel it is an excellent reference for all those who want to learn and know in depth about ASP.NET AJAX. After reading the chapter on developing ASP.NET AJAX Client Controls, I decided to build a general purpose ToolTip control which I had seen on many websites and was curious to build. The rest of the document will explain the actual implementation.

The tooltip control is built using two simple DOM elements <div> and <p>. In the sample presented here, I have associated it to a simple textbox control.

Using the code

The constructor of the control is shown below:

// Register namespace.
// Constructor
AjaxClientComponent.ToolTipTextBox = function(element) {
    AjaxClientComponent.ToolTipTextBox.initializeBase(this, [element]);
    // define private variables
    this._toolTip =null;
    this._cssClass =null;

If you look at above JavaScript code, the _container variable is used to initialize it with the container element which contains all the controls with which we can associate the appropriate tooltip. _divElement and _pElement variables are initialised to assign a dynamic <div> tag and a <p> tag created as part of the initialization process. The _toolTip variable is used to initialise the tooltip text to be displayed, and _cssClass is the CSS class which has styles defined for tooltip elements to display and hide, as well as to give the look and feel as shown above.

All the associated properties, methods, and event handlers of this class are initialized using a prototype object of ToolTipTextBox:

// Define Methods,properties and event handlers here
AjaxClientComponent.ToolTipTextBox.prototype = { initialize: function() 
    AjaxClientComponent.ToolTipTextBox.callBaseMethod(this, 'initialize'); 
    // Add custom initialization here

    //create div and p tag dynamically
    this._divElement = document.createElement('div');
    this._pElement = document.createElement('p'); 
    this._pElement.innerHTML =this._toolTip;

    // assign css class the <p> tag

    // Hide the tooltip
     this._cssClass ="hidenotes";
    // add the <div> element to the container

    // add event handlers here 

    // Dispose method
    dispose: function() {
        //Add custom dispose actions here
        AjaxClientComponent.ToolTipTextBox.callBaseMethod(this, 'dispose'); 
    // Define all event handlers here
    // MouseMovw Event handler

        // Show the tooltip by changing the class of div element.

    // Mouseout Event handler

   // Define set and get methods for initialising tooltip text

   get_toolTip: function() {
     return this._toolTip;

   set_toolTip: function(value) {
   // get and set methods for container element

   get_container:function() {
     return this._container; 

   set_container:function(value) {

If you look at above code snippet, the initialize() method creates the <div> and <p> tags dynamically, and assigns the CSS class to them, and then adds them as children of the container element. It adds the event handlers for the mousemove and mouseout events of the element with which the tooltip will be associated with. Two CSS classes notes and hidenotes show and hide the tooltip, respectively.

The _onMousemove() method shows the tooltip by assigning the notes CSS class to _divElement, and it also initializes the left and top properties based on the mouse client coordinates passed as event argument to the evt object.

The _onMouseout() method hides the tooltip by assigning the hidenotes CSS class to _divElement.

Rest of the properties are self explanatory.

Now, let us see the code from the default.aspx file to see how the above control is invoked.

<script type='text/javascript' language ="'javascript">
function page_init(sender,e){
    'toolTip':'Please enter your first name',
    'toolTip':'Please enter your last name',
    'toolTip':'Enter your address here',



All the details of the default.aspx file are not shown here, and focus is mainly to explain how the control is invoked. The ScriptManager control is used inside the default.aspx file, and has a reference to ToolTipTextbox.js which has the implementation details of the tooltip control. The control is initialized in the page_init() method, and associates the tooltip control with three input elements.

I recommend readers to download the code using the link shown at the top of the document to see the detailed implementation.


We saw how easy it is to implement and build AJAX Client Controls by leveraging the power of the ASP.NET AJAX framework and JavaScript The source code zip contains the implementation details with a test ASPX file which invokes the control. Please download it and see the working demo. If you face any difficulties, please contact me at Good luck!!!

My other articles


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior)
United Kingdom United Kingdom
I am Solution Architect with 20+ years of IT experience in the field of real time,embedded,client/server and web based applications and Business Intelligence . I am currently working as Senior Consultant for Infor.

You may also be interested in...


Comments and Discussions

GeneralNot work with master page Pin
Yasser Zaid11-May-09 21:01
memberYasser Zaid11-May-09 21:01 
QuestionTitle? Pin
Soundman32.27-Dec-08 22:27
memberSoundman32.27-Dec-08 22:27 
AnswerRe: Title? Pin
Gokuldas8-Dec-08 2:19
memberGokuldas8-Dec-08 2:19 
AnswerRe: Title? Pin
Kanedogg088-Dec-08 16:16
memberKanedogg088-Dec-08 16:16 
GeneralRe: Title? Pin
cmschick10-Dec-08 18:45
membercmschick10-Dec-08 18:45 
GeneralRe: Title? Pin
cmschick10-Dec-08 18:54
membercmschick10-Dec-08 18:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web02 | 2.8.190419.4 | Last Updated 7 Dec 2008
Article Copyright 2008 by Gokuldas
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid