Click here to Skip to main content
Click here to Skip to main content
Go to top

TextBox With ToolTip Control Implementation

, 6 Aug 2006
Rate this:
Please Sign up or sign in to vote.
How to implement a fancy tooltip mechanism for a TextBox control.

Introduction

Almost any web application should guide the user and help him/her reach major goals. It should provide advices, next possible steps, and so on. In other words, it should provide on demand help. For example, the user doesn't know what the "Importance" field means. You may help the user by showing a tool tip. This article describes the creation of such a tool tip control integrated with a text box.

Here is the idea. We have a form with several fields:

We want to show a tool tip when the user is about to type something.

It means the tool tip should be visible on the onfocus event. Also, we want to highlight the current field. This is just a small UI improvement that helps the user to feel the current state and recover faster from interrupts.

OK, let's think about how we can implement such a control. What we need is an additional layer that will be visible in onfocus and hidden in onblur. This is not a problem; we can easily show/hide a layer with JavaScript. The problem is in the position. How can we show a tool tip layer right after the input field? One possible way is to define x, y coordinates of the input field and set these coordinates to the tool tip layer.

function findPosX(obj)
{
     var curleft = 0;
     if (obj.offsetParent)
     {
          while (obj.offsetParent)
          {
               curleft += obj.offsetLeft
               obj = obj.offsetParent;
          }
     }
     else if (obj.x)
          curleft += obj.x;
     return curleft;
}

So, to implement what we want, the following steps are required:

  1. Inherit from the TextBox control
  2. Add a ToolTipText field that will store the tool tip text
  3. Create a tool tip layer and hide it by default (in the Render method)
  4. Define x, y coordinates, and show tool tip layer in onfocus

From the control user perspective, we need the simplest solution: just put the control on the page and specify the tool tip text. That's it.

<tp:TpTextBox MaxLength="255" ToolTipText="Put any text you want here..." 
       ID="TpTextBox2" CssClass="input" Width="300" runat="server" Text=''>
</tp:TpTextBox>

And here is the solution step by step.

Implementation

Step 1-2. Inherit from TextBox control, add the ToolTipText field that will store the tool tip text

public class TpTextBox : TextBox
{
    private string toolTipText = null;

    public string ToolTipText
    {
        get { return toolTipText; }
        set { toolTipText = value; }
    }

Step 3. Create tool tip layer and hide it by default (in Render method)

The most interesting things are in the Render method of the TpTextBox class. See the comments in the code:

protected override void Render(HtmlTextWriter writer)
{
    FormTipAndFocus(writer);
    base.Render(writer);
}

private void FormTipAndFocus(HtmlTextWriter writer)
{
    string tipFunction = "";
    
    // Show tool tip only if ToolTipText has some text
    if (!ReferenceEquals(ToolTipText, null))
    {
        // to have several controls on page,
        // we should make unique ids for tool tip layers
        // javscript function will use this id to show/hide layer
        string id = Guid.NewGuid().ToString();
        
        // create tool tip layer. Resolve drop down
        // and z-index problem for IE as well
        string toolTipLayer = String.Format(
                "<div class='toolTip selectFree' id='{0}'>" + 
                "<div class='content'>{1}</div>" + 
                "<!--[if lte IE 6.5]><iframe></iframe><![endif]--></div>",
                id, ToolTipText);
        Literal lit = new Literal();
        lit.Text = toolTipLayer;
        lit.RenderControl(writer);
    }
}

Step 4. Define x,y coordinates, show tool tip layer in onfocus

And here is the code of the showTip JavaScript function. It shows/hides the tool tip and positions it on the right place - after the input field.

function showTip(id, inputId) {
    var panel = document.getElementById(id);
    var inputField = document.getElementById(inputId);
                   
    // show/hide tool tip layer
    if (panel.style.display != 'block') {
        panel.style.display = 'block';
    }
    else {
        panel.style.display = 'none';
    }
    
    //positioning
    panel.style.position = 'absolute';
    var width = inputField.style.width.toString();
    var w = findPosX(inputField) + parseInt(width.substring(0, width.length - 2));
    var h = findPosY(inputField);
    panel.style.left = w + 3 + 'px';
    panel.style.top = h + 'px';
}

Now we have to invoke the showTip function in onfocus and onblur. Just add these attributes to the TpTextBox in the Render method:

private void FormTipAndFocus(HtmlTextWriter writer)
{
    string tipFunction = "";
    
    if (!ReferenceEquals(ToolTipText, null))
    {
        ...

        tipFunction = String.Format("showTip('{0}','{1}');", id, ClientID);
    }

    // add showTip function onfocus event, also change styles to highlight input field
    Attributes.Add("onfocus", tipFunction + 
       String.Format(FocusBlurStyles, focusBackground, focusBorderColor));

    Attributes.Add("onblur", tipFunction + 
       String.Format(FocusBlurStyles, blurBackground, blurBorderColor));
}

That's it. The control is ready to use.

Note:

We are working on TargetProcess v.2.0. It is an agile project management solution based on ASP.NET 2.0. We are sharing ideas, code, and so on. Check them at 20.targetprocess.com.

License

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

Share

About the Author

firefalcon

Belarus Belarus
Lead of TargetProcess Project (www.targetprocess.com).
TargetProcess is an integrated Project Management and Bug Tracking software

Comments and Discussions

 
Questionlayer over select box PinmemberAinapure28-Aug-06 8:53 
I know with rolling out of IE7 this should not be an issue but for current IE browser, Does this tooltip control render over the select box? As we know select box is a windowed control and NOT a windowless control and it takes precedence over the layer.
 
-Amit

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 6 Aug 2006
Article Copyright 2006 by firefalcon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid