Skip to main content
Email Password   helpLost your password?

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:

// 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:

// 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
    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 <div> 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.

<script type='text/javascript' language ="'javascript">
Sys.Application.add_init(page_init);
        
function page_init(sender,e){
  $create(AjaxClientComponent.ToolTipTextBox,
  {
    'toolTip':'Please enter your first name',
    'container':'container'
  }
  
  ,{},{},$get('firstName'));
  $create(AjaxClientComponent.ToolTipTextBox,
  {
    'toolTip':'Please enter your last name',
    'container':'container'
  }
  
  ,{},{},$get('lastName'));
  $create(AjaxClientComponent.ToolTipTextBox,
  {
    'toolTip':'Enter your address here',
    'container':'container'
  }
  
  ,{},{},$get('address'));

}

</script>

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.

Conclusion

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 gokuldasc@yahoo.com. Good luck!!!

My other articles

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralNot work with master page Pin
yasserzaid		22:01 11 May '09  
GeneralTitle? Pin
Soundman32.2		23:27 7 Dec '08  
GeneralRe: Title? Pin
gokuldas		3:19 8 Dec '08  
AnswerRe: Title? Pin
Kanedogg08		17:16 8 Dec '08  
GeneralRe: Title? Pin
cmschick		19:45 10 Dec '08  
GeneralRe: Title? Pin
cmschick		19:54 10 Dec '08  
Last Visit: 8:45 22 Nov '09     Last Update: 8:45 22 Nov '09 1


Last Updated 7 Dec 2008 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009