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:
- Inherit from TextBox control
- Add ToolTipText field that will store tool tip text
- Create tool tip layer and hide it by default (in Render method)
- 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.