Implementing TextBox With Tool Tip Control (ASP.NET C#)

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

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

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

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

OK, let’s think about how we can implement such control. What we need is additional layer that will be visible onfocus and hidden onblur. This is not a problem, we can easily show/hide layer with javascript. The problem is in position. How can we show tool tip layer right after input field? One possible way is to define x,y coordinates of input field and set these coordinates to 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 required:

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

From control user perspective we need the simplest solution: just put control on the page and specify 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.

Step 1-2. Inherit from TextBox control, Add ToolTipText field that will store 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 Render method of TpTextBox class. See comments in 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 onfocus

And here is the code of showTip javascript function. It shows/hides tool tip and position it on the right place – after 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 showTip function onfocus and onblur. Just add these attributes to TpTextBox in 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. Control is ready to use.

Categories

Tags

Additional Resources