Introduction

The first time I saw in new office 2007 system, I got attracted by the new user interface changes; the things that attracted me the most, were, of course, the new Ribbon and the SuperTooltip. I wanted to get these two controls in my own window applications. Since then, I've finished the SuperToolTip and started working on the Ribbon.

After doing a little research, I found out that I am not the only one that thought of a SuperToolTip control. In this article you will learn how to create such a control. I will use 100% C# with no native Windows API. The control will also have a very rich design time support.

Figure 1: The SuperTooltip with a brief description and an example

Figure 2: The superTooltip can also include images

My first hurdle was to create a popup window without using the windows APIs - luckily I found this blog post, which explained an easy way to create a popup window. All you require is a ToolStip DropDown and a ToolStripControlHost instance and the Control you want to appear in the popup window as shown in figure 1.

Code Listing 1

My second hurdle was to implement the SuperTooltip without the need to invoke any windows APIs, I googled around and the first search result was a post in Jensen Harris' Blog one of the MS Office guys. This blog post was the starting point for me in the journey of collecting the needed features for the SuperTooltip.

What does this article cover?

This section will describe the different aspects the SuperToolTip library went through.

• Feature List
• The SuperToolTip component.
• The SuperToolTip window.
  • The SuperToolTipWindowData
  • The SuperToolTipInfo
• The Design Time Support
  • Grouping Properties using TypeConverters.
  • Editing the uperToolTip easily by building a UITypeEditor.
  • Extending other controls using ExtenderProvider.

Feature List

I summed up all the features I needed and exposed them through these properties.

Properties for each attached control

• Nice looking Gradient Back color through three properties:
  1. BackgroundGradientBegin: The starting color of the background gradient.
  2. BackgroundGradientMiddle: The middle color of the background gradient.
  3. BackgroundGradientEnd: The end color of the background gradient.
• Customizing the Header through these properties:
  1. HeaderText: Text to be displayed in the header.
  2. HeaderFont: Font of the text in the header.
  3. HeaderForeColor: Color of the text in the header.
  4. ShowHeader: Indication to show or hide the header.
  5. ShowHeaderSeparator: Indication to show or hide the header separator.
• Customizing the Footer through these properties:
  1. FooterText: Text to be displayed in the footer.
  2. FooterForeFont: Font of the text in the footer.
  3. FooterColor: Color of the text in the footer.
  4. FooterImage: The image to show in the left part of the footer
  5. ShowFooter: Inidication to show or hide the footer.
  6. ShowFooterSeparator: Indication to show or hide the footer separator.
• Customizing the Body:
  1. BodyText: The body text.
  2. BodyFont: Font of the text in the body.
  3. BodyForeColor: Color of the text in the body.
  4. BodyImage: The image to show in the left part of the body.

The SuperToolTip component

The SuperToolTip component is the coordinator of all these classes to work together correctly.

1. SuperToolTipWindow: Derived from ToolStripDropDown which is the window itself that is shown.
2. SuperToolTipControlHost: Derived from ToolStripControlHost which hosts the usercontrol in the window.
3. SuperToolTipWindowData: Derived from UserControl that has the controls which appear in the tooltip window described more later.
4. SuperToolTipInfo: Derived from Object which contains all the properties to be exposed for controls.
5. SuperToolTipInfoWrapper: Derived from Object which wraps a SuperToolTipInfo with a boolean variable to determine if it is used or not.

As described above we only need one instance of each of the SuperToolTipWindow, SuperToolTipControlHost and SuperToolTipWindowData. While for each control on the form we need one SuperToolTipInfoWrapper which in turn wraps one SuperToolTipInfo that contains the actual data to be displayed. Therefore, I have used a Dictionary<Control, SuperToolTipInfoWrapper> list.

The SuperToolTip Window

The SuperToolTipWindow can do nothing on its own. It is a window wrapper of the WindowData UserControl which is shown in listing 2.

Code Listing 2

The SuperToolTipWindowData control.

The SuperToolTipWindowData is derived from the UserControl. It contains all the data needed for a SuperToolTip window which is described in the following figure.

Figure 3: The SuperToolTipWindowData

The SuperToolTipInfo class

This class acts only as the container or the temporary storage of each control's tooltip data. It contains the following properties.

Table 1: Provided Properties for each control

Very rich design time support

In the SuperTooltip component I tried to use most of the design time environment services, the services I used here are:

• TypeConverter
• UITypeEditor
• ExtenderProvider

In this section I will describe in details what and how to make them in our own custom controls useful.

Arranging the provided properties using TypeConverters.

Type Converters are classes that define how classes are converted to and from other data types. In Design-Time they are used to convert to and from strings because all property values in the property grid are shown as strings.

Common .NET Type Converters

The .NET framework is already equipped with several useful and reusable type converters. One of them is the ExpandableObjectConverter which is located in the System.ComponentModel namespace. This converter converts objects to expandable representations. It overrides GetProperties and GetPropertiesSupported to return the properties through the GetProperties method of the TypeDescriptor. The Result of attaching this type converter to a complex object is shown in the below figure.

Figure 4: ExpandableObject example

You can achieve a similar behaviour by attaching the TypeConverter to your complex property using the TypeConverterAttribute.

Code Listing 3

Providing editing assistance using the UITypeEditor

To help developers manage the SuperToolTip for each component I built a SuperToolTipEditor which is derived from UITypeConverter the editor is as shown below.

Figure 5: The SuperToolTip Editor

The implementation of this editor was quit easy. The following section desribes the required steps to create the editor:

1. Create a windows form with buttons having a DialogResult to be used as the Editing Dialog.
2. Derive a class from UITypeEditor and override two methods shown in the code listing 4.

   Code Listing 4

   public class SuperToolTipEditor : UITypeEditor { public override UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context) { return UITypeEditorEditStyle.Modal; } public override object EditValue(ITypeDescriptorContext context, IServiceProvider provider, object value) { if (provider == null) { return null; } IWindowsFormsEditorService iwefs = (IWindowsFormsEditorService) provider.GetService(typeof(IWindowsFormsEditorService)); SuperToolTipInfoWrapper info = (SuperToolTipInfoWrapper)value; dlgSuperToolTipEditor dlg = new dlgSuperToolTipEditor(info); if (iwefs.ShowDialog(dlg) == DialogResult.OK) { return dlg.SuperToolTipInfoWrapper; } return value; } }
3. Attach the TypeEditor with the Property being edited.

   Code Listing 5

   [Editor(typeof(Elsehemy.Windows.Forms.Editors.SuperToolTipEditor), typeof(UITypeEditor))]

Extending other controls using ExtenderProvider

By adding the IExtenderProvider interface to our component we have a control extender. The idea of this interface is to provide some services to other controls, to give them richer design time support. This Extender component extends other classes (controls) to give them more properties they don't own.

This interface provides a single method CanExtend, as shown in code listing 6 which expects an object passed to it, and it returns a boolean as an answer. The object passed to this method represents the selected control at design time, and the bool result specifies if the class that implements this method should provide its services to this object or not.

Code Listing 6

Based on the result of this call, the VS designer The Design Time Environment decides whether to provide the specified service to the control or not, so when you select a control, the designer calls this method at design time, passing the selected control to it as a parameter, and if its get true, the provided functionality will appear in the selected control property page (and in the code too) as a new property, exactly as if it was implemented in the original control code.

That's not it. Yes we already have an extender that will extend other controls but we didn't tell which properties this extender will give to other controls. For each property we want to provide we follow the following steps:

1. Decorate the component with the ProvidePropertyAttribute and give the PropertyName in attribute constructor.
2. Provide two methods with the names GetPropertyName and SetPropertyName for the get and set of that property, any design time attributes can be added to the GetPropertyName method, just take care of the property casing.

An Example is shown in code listing 7.

Code Listing 7

As shown in the code listing the Get returns the value that the editor needs, the Set takes the just edited value. Both Get and Set take a control as a parameter that is being edited.

Figure 6: Button Properties

What's next?

Next versions of this component should include much more interactivity and enhanced user interface like:

• Balloon tips
• Embedded controls
• More schemes

Revision History

Summary

In this article you have learned how to implement the SuperTooltip component. Please leave a comment or any questions (if needed) and report any bugs you encounter.

Downloads

References

About Amr Elsehemy

Sorry, no bio is available View complete profile

---

Discussion

Subject	Author	Date
How can support effects	Nailah Mustafa	6/3/2007 11:57 AM
I would like to add effects while showing or hiding the tool tip?! do you have any idea how to achieve that? Reply | Permanent link
RE:How can support effects	Amr Elsehemy	6/3/2007 3:49 PM
Would you tell me more? what kind of effects would you like to show? Reply | Permanent link
ToolStripButton	Ian Johnson	6/5/2007 3:17 AM
How can I use the SuperToolTip with a ToolStripButton? Reply | Permanent link
RE:ToolStripButton	Amr Elsehemy	6/5/2007 5:45 AM
Hello Ian, It seems that the ToolStripButton is not derived from 'Control' so the extender didnt work with it well. To solve this: You should find the lowest common Class that all controls we want to extend derive from, in this case it is the 'Component' class. Steps to apply it: 1- Change the decoration to [ProvideProperty("SuperStuff", typeof(Component))] 2-Tell the extender that is can extend ToolStripItems as: public bool CanExtend(object extendee) { return (extendee is ToolStripItem) || ((extendee is Control) && !(extendee is SuperToolTip) && !(extendee is Form)); } 3- Adjust the SetPropertyName and the GetPropertyName to accept a Component rather than a Control. as: public SuperToolTipInfoWrapper GetSuperStuff(Component control) { ... } public void SetSuperStuff(Component control, SuperToolTipInfoWrapper info) { ... } public void ResetSuperStuff(Component control) { ... } public bool ShouldSerializeSuperStuff(Component control) { ... } Thats all you need to show the SuperStuffProperty in your ToolStripItems, I will take care of this issue in the next version, right now I am busy a little preparing for MCPD exams. I hope I helped you here. Reply | Permanent link
ToolStripButton	Ian Johnson	6/5/2007 7:34 AM
Hi, thanks for the speedy reply. I also had to change the controlTable so that it holds a Component along with GetControlInfo() and SetControlInfo(). However, this change prevents compilation because the Component class does not have MouseEnter/MouseLeave events. PS: Good luck with the MCPD exams. Reply | Permanent link
RE:ToolStripButton	Amr Elsehemy	6/5/2007 12:06 PM
First, Thank you Second, you can make a cast to a control or ToolStripItem when appropriate then hook the mouse leave and enter events checks this snippet of the SetControlInfo: private void SetContolInfo(Component control, SuperToolTipInfoWrapper info) { if (controlTable.ContainsKey(control)) { if (info == null) //hook events to our event handlers; { if (control is Control) { Control c = control as Control; c.MouseEnter -= new EventHandler(this.MouseEntered); c.MouseLeave -= new EventHandler(this.MouseLeft); controlTable.Remove(control); } else if (control is ToolStripItem) { ToolStripItem c = control as ToolStripItem; c.MouseEnter -= new EventHandler(this.MouseEntered); c.MouseLeave -= new EventHandler(this.MouseLeft); controlTable.Remove(control); } return; } controlTable[control] = info; } else { controlTable.Add(control, info); //hook events to our event handlers; if (control is Control) { Control c = control as Control; c.MouseEnter += new EventHandler(this.MouseEntered); c.MouseLeave += new EventHandler(this.MouseLeft); } else if (control is ToolStripItem) { ToolStripItem c = control as ToolStripItem; c.MouseEnter += new EventHandler(this.MouseEntered); c.MouseLeave += new EventHandler(this.MouseLeft); } } } Reply | Permanent link
ToolStripButton	Ian Johnson	6/5/2007 2:37 PM
Casting the controls like that is a great idea, but it does cause the Show() method to raise an exception when you move over a ToolStripItem at runtime. I have however, come up with the following (somewhat messy) solution which seems to work... Firstly change the MouseEntered() event: private void MouseEntered(object sender, EventArgs e) {Show(sender);} Next change the Show() method: public void Show(Object owner) { Component o = owner as Component; if (controlTable[o].UseSuperToolTip){ winData.SuperInfo = controlTable[o].SuperToolTipInfo; if (isFadding){window.Close();} if (_useFadding) {isFadding = true; FadeIn();} if (owner is Control){ Control c = owner as Control; window.Show(c, new Point(0, c.Height), ToolStripDropDownDirection.BelowRight);} else if (owner is ToolStripItem){ ToolStripItem c = owner as ToolStripItem; ToolStrip strip = c.Owner; Point point = strip.PointToScreen(strip.Location); window.Show(new Point(point.X + c.Bounds.Left, point.Y + c.Bounds.Height), ToolStripDropDownDirection.BelowRight); }}} Another alternative would be to create two overloaded Show() methods and then simply make the appropriate cast in the MouseEntered() event. Above all, this is a great component and is by far more superior to the normal ToolTip - Great work! Reply | Permanent link
RE:ToolStripButton	Amr Elsehemy	6/5/2007 3:59 PM
Thank you very much Ian, I hope this component became handy and useful, I will try to enhance it more and more to make it more usable in future versions. Best Regards. Reply | Permanent link
goood amr	Ramy Ahmed	6/7/2007 6:43 AM
gooooooooooooooood amr Reply | Permanent link
hi	Ramy Ahmed	6/7/2007 7:20 AM
How can I use the SuperToolTip ? Reply | Permanent link
great	Deena Samir	6/8/2007 5:38 PM
amr gameeeeeeeeeeeeeeeeeed :)) Reply | Permanent link
(Y)	Mohamed Ezzat	6/9/2007 11:54 AM
well done maw.. how can i use supertootip?.. i think no one asked u this question before =D Reply | Permanent link
tmam	Ismail Marmoush	6/12/2007 12:21 PM
really nice work Reply | Permanent link
gr8	A ElBadawy	6/13/2007 7:29 AM
where can i find supertooltip? Reply | Permanent link
Where?	Sonu Kapoor	6/13/2007 7:45 AM
A ElBadawy: See the download section at the end of the article and before the comments start. [MVP since 2005] [MCAD] Webmaster of DotNetSlackers Question or Suggestion? Feel free to ask my any .NET question Our Posting FAQ Reply | Permanent link
Islam Elsaify	Islam Elsaify	6/14/2007 8:37 AM
cooooooooooool it's great work Reply | Permanent link
ahmed adam	Adam Ahmed	6/14/2007 2:04 PM
nice work mr.amr i hope the best and the best for u with my wishes Reply | Permanent link
100% fake voting # SuperToolTip # For more information about "One-sided articles"	Fana Khaan	6/19/2007 3:06 PM
This Web site dotnetslackers.com is maintained by only # Amr Elsehemy # Adam Ahmed Reply | Permanent link

---

Please login to rate or to leave a comment.