How Can I Dynamically Control Displaying ToolTips from the Client Side?
Have you ever wanted to control whether ToolTips are displayed for all controls on a WebPage at once without having to make a round trip to the Server? I ran into the need to do this very thing and was amazed at how difficult it was to make what I thought would be a simple task, work as you would expect. I didn't want to write some clunky routine in the Code Behind file to handle this because then I would have to "Hard Code" references to items in the Presentation layer in the Code-Behind layer. Not to mention having to repost the entire page just to process the routine each time the ToolTip display state is changed. I didn't even want to think about what would happen if the need to ever add/remove or rename controls on the Page would come about (and don't say that wouldn't happen to you because that's exactly when it's most likely to happen!)
Since there is no "Global" flag I can set to turn ToolTips on or off, I needed a way to handle this quickly and gracefully from the Client side (Browser). I searched Google and all the various ASP.Net sites and didn't find anything that could solve the particular problem I was having. What follows is the end result of much experimentation and research. I put together this document to help the next person that struggles with this same issue in the hopes of saving them a whole lot of trouble and stress. Besides, I've certainly benefited from the kindness of other developers who posted their code to help me. Now it's my turn to give something back to help others.
So the first thing we need is a Checkbox control to allow us to control whether the ToolTips are displayed or not.
<asp:CheckBox ID="cbToolTipMode" runat="server"
AutoPostBack="false" Text=" Show Help ToolTips " Checked="false" />
You would add this control to the Page wherever you want it to be displayed. Notice the ID tag value (cbToolTipMode) as we will reference this later. The next thing we need is a Client side method to handle setting the ToolTip value based on the state of our CheckBox. This will be done with a JavaScript function placed in the Page Header section.
<head runat="server">
<script language="javascript">
function SetToolTip(Ctrl, TipText)
{
if (document.getElementById("cbToolTipMode").checked == true)
{
if (Ctrl.title == '')
Ctrl.title=TipText;
}
else
{
if (Ctrl.title != '')
Ctrl.title='';
}
}
</script>
</head>
Notice that we are checking the checked state of our CheckBox control at the very start of our JavaScript function to control whether we add or remove the ToolTip text. Now that we have the JavaScript method to set the ToolTip text based on the checked state of our CheckBox, we need some way of telling the Page to execute the JavaScript for each Control on the Page. We'll want this method to be called anytime the Mouse enters the borders of the Control. So we'll add an attribute to every control we want to dynamically control the ToolTip display state for by calling this method whenever the Mouse enters the control borders.
<asp:CheckBox ID="cbToolTipMode" runat="server"
OnMouseEnter="JavaScript:SetToolTip(this, 'ToolTip Message goes here')"
AutoPostBack="false" Text=" Show Help ToolTips " Checked="false" />
Notice that we have added an 'OnMouseEnter" event handler to our CheckBox control attributes. This event handler is known to JavaScript but may not be recognized by the HTML editor you are using:
OnMouseEnter="JavaScript:SetToolTip(this, 'ToolTip Message goes here')"
This is what tells the Page to call our JavaScript method when the Mouse enters the area of the Page where the CheckBox is located. This part of the exercise was fairly simple to achieve, what made this much trickier was when I used this same technique with controls located on a DataGrid. The same technique works on a DataGrid until you want to get the ToolTip text from a Server side datasource. This is where the rub is and everything I tried would generate a 'badly formed tag' error or blow up at runtime. I tried various scenarios of building the event handler string to include the server side tag but nothing would work. In the end, this is what DID work:
OnMouseEnter='<%# String.Format("JavaScript:SetToolTip(this,{0}{1}{2});",
ControlChars.Quote, Container.DataItem("Value"), ControlChars.Quote) %>'
The real key to what you see are the 'ControlChars.Quote' located in the Microsoft.VisualBasic namespace used in conjunction with the String.Format method. This approach allowed me to use the value contained in the bound DataItem column as an input to the JavaScript function. I don't know C# but I would assume there is a similar method like String.Format. In the old days when I was writing code in 'C', it would have been the sprintf function. Whatever it is in C#, just replace the String.Format method with it's C# equivalent and you will hopefully be good to go! I hope this article will make it easier for you to dynamically control ToolTip display modes from a Page level.
Enjoy!
BackGround: the Story Behind the Code
The need to toggle ToolTips on/off came about while designing a general office software tool. Some Users found the ToolTip messages annoying (especially since the application GUI is quite intuitive). Unfortunately, there are those Users who struggle with anything that plugs into the wall and it was for their benifit the ToolTip messages were added. Regular use of this tool demonstrated to me personally the dire need for a way to turn off the ToolTip messages with a simple CheckBox control. When I looked at all the ways I could implement such a feature, they all seemed clunky at best so I set out to find a graceful way to make it happen. You are now reading the solution I came up with to address this simple in concept but amazingly difficult in implementation feature.
Using the Code
To use this code to implement Dynamic Client Side ToolTip Messages on your web page, simply follow these steps:
- Add your CheckBox control to the page.
- Add the OnMouseEnter event handler to all Page controls you want to control (Don't forget to set each control with the ToolTip message!).
- Change the CheckBox control name in the JavaScript 'SetToolTip' method to match the name you gave your control.
Points of Interest
It still impresses me how many different ways there are to solve a problem in ASP.NET. I tried several different ways to make this idea work but this one was the magic bullet. Right when I thought I had tried everything, this idea came to me while working a different problem. Isn't that how it always works?
