I know I’ve promised a little series on client side data binding, but here is one quick and dirty post just to break the monotony.
As I’ve been developing reBlogger for past year or so, many times I needed a quick and simple way to explain some of the features to the user. reBlogger is, what we beleive to be, a very unique application and here and there we simple need to provide users with some instructions to understand some of our revolutionary (I never claimed I’m humble!) concepts. We’ve tried using builtin tooltips (atl attribute) on images, but they are very limited (they only represent text and in some browsers the length of text is severely limited).
So, here is an atlas way of making your own tooltip and I will creatively call it : “tool tip on steroids” (I bet you haven’t heard that one before).
We’ll set up just a small form with two input fields, and two tooltips next to the textboxes. When user hovers over the image, our super tooltip will appear.
For the tooltip image we’ll use <asp:Image control, and the image should be something suggestive, like a question mark. Here is the complete code for the tooltip, because it’s very simple and I’ve wrote already about something similar:
So first we have the <asp:image control. Nothing special here. Next control is the <asp:panel control, which represents our tooltip. Feel free to go nuts here, whatever crazy HTML you put in there it’s ok. The last thing and the one actually making it all happen is Hover Menu Extender (part of AtlasControlToolkit).
Several things that we need to set up here : PopupControlID (the id of our tooltip, in our case the id of the <asp:panel control), TargetControlID (the id of our <asp:image control, in our case the little question mark gif). Basically we say, when user hovers over the TargetControl show PopupControl. There are two optional properties that we’ll set here. First is PopupPosition (I’ve put it right, so popup doesn’t display over the form) which determines at which side in respect to the TargetControl should PopupControl appear. Second property is OffsetX – I’ve set this to 20, which basically means that TargetControl and PopupControls should be 20px apart horizontally.
And that’s it.
You can download the whole project from reBlogger lab.
This blog is being delivered to you by
“Do you know what your employees are blogging about?”