TextBox With ToolTip Control Implementation

• Download source files - 27.3 KB

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.