ToolTip AJAX Client Control in Asp.net

• Download source code - 7.33 KB

Introduction

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.

Background

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:

Collapse

// Register namespace.
Type.registerNamespace("AjaxClientComponent");
// Constructor
AjaxClientComponent.ToolTipTextBox = function(element) {
    AjaxClientComponent.ToolTipTextBox.initializeBase(this, [element]);
    // define private variables
    this._container=null;
    this._divElement=null;
    this._pElement=null;
    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:

Collapse

// 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  tag
    Sys.UI.DomElement.addCssClass(this._pElement,'tipText');

    // Hide the tooltip
     this._cssClass ="hidenotes";
    Sys.UI.DomElement.addCssClass(this._divElement,this._cssClass);
        
     this._divElement.appendChild(this._pElement);
    // add the 
 element to the container
    $get(this._container).appendChild(this._divElement); 

    // add event handlers here 
    $addHandlers(this.get_element(),
    {
       mousemove:this._onMouseover, 
         mouseout:this._onMouseout

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

    if(this._divElement!=null){
        // Show the tooltip by changing the class of div element.
        if(this._cssClass=='hidenotes'){ 
            Sys.UI.DomElement.removeCssClass(this._divElement,this._cssClass); 
            this._cssClass='notes'; 
            Sys.UI.DomElement.addCssClass(this._divElement,this._cssClass); 
        }

        this._divElement.style.left=evt.clientX; 
        this._divElement.style.top=evt.clientY+5;
    },

    // Mouseout Event handler
    _onMouseout:function(evt){ 
    if(this._divElement!=null)
    { 
        if(this._cssClass!=null)
        {
            Sys.UI.DomElement.removeCssClass(this._divElement,this._cssClass); 
            this._cssClass='hidenotes';
            Sys.UI.DomElement.addCssClass(this._divElement,this._cssClass);
        }
    }
},    

   //properties 
   // Define set and get methods for initialising tooltip text

   get_toolTip: function() {
     return this._toolTip;
   },

   set_toolTip: function(value) {
     this._toolTip=value; 
   },
   // get and set methods for container element

   get_container:function() {
     return this._container; 
   }, 

   set_container:function(value) {
     this._container=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.

Collapse