ToolTip With Image C#

• Download demo - 354.12 KB

Introduction

Everyone knows the ToolTip control (the programmer ones!!). Since the beginning, the control itself has been modified and enhanced in many ways, but it was capable of showing only texts. The given sample can show a tooltip with images, which is the subject of this article.

Background

Reading this article would give you a general understanding of the basic ideas discussed here, but to have a complete understanding of every concept, you must have some knowledge of the .NET API calls and their uses, event handling, etc...

Using the Code

I have made a simple class CustomizedToolTip which contains all the code to display the tooltip for the control you want. To use the class in your application, just include CustomizedToolTip.cs file in your project. Then simply call the SetToolTip function with the arguments and the tooltip will be displayed for the control.

Here is the code that shows how to call the SetToolTip function to assign the tool tip to any control:

CustomizedToolTip myToolTip = new CustomizedToolTip();
myToolTip.SetToolTip(button1, "Button 1. ToolTip with Image");

The above method call can set only the text for the given control. Now to get the image for ToolTip, I have made a simple approach to use the Tag property of the control. We need to set the Tag property as given below to display the image in ToolTip:

button1.Tag = Resources.Image // or Image.FromFile(--Path--)

If required, developers can get the image from controls specific property instead of Tag.

The description of the CustomizedTooltip is given below. Now before you use ToolTip functionality, you need to initialize it. Below is the line of the code that will initialize the Tooltip control:

public CustomizedToolTip()
{
    this.OwnerDraw = true;
    myTextFormat.FormatFlags = StringFormatFlags.LineLimit;
    myTextFormat.Alignment = StringAlignment.Near;
    myTextFormat.LineAlignment = StringAlignment.Center;
    myTextFormat.Trimming = StringTrimming.None;
    this.Popup += new PopupEventHandler(CustomizedToolTip_Popup);
    this.Draw += new DrawToolTipEventHandler(CustomizedToolTip_Draw);
}

Here you have initialized the Tooltip control. Now you need to make the window for tooltip. As shown in the above code, we have subscribed to two events - PopUp and Draw. Before showing the ToolTip for any control, first PopUp handler gets called and then Draw handler. Below is the code that will show how to do it:

void CustomizedToolTip_Popup(object sender, PopupEventArgs e)
{
    if (OwnerDraw)
    {
        if (!myAutoSize)
        {
            e.ToolTipSize = mySize;
            myInternalImageWidth = mySize.Height;
        }
        else
        {
            Size oldSize = e.ToolTipSize;
            Control parent = e.AssociatedControl;
            Image toolTipImage = parent.Tag as Image;
            if (toolTipImage != null)
            {
                myInternalImageWidth = oldSize.Height;
                oldSize.Width += myInternalImageWidth + PADDING;
            }
            else
            {
                oldSize.Width += PADDING;
            }
            e.ToolTipSize = oldSize;
        }
    }
}

In the PopUp event, we can set the Size of the ToolTip window. Here we have a boolean AutoSize to decide whether we want to resize the ToolTip area or not. By default, the ToolTip will be shown as normal XP ToolTip.

If someone wants to specify the Size of the ToolTip area, she/he can set the property AutoSize as false and set the Size property. That may appear like:

Here is the cool code to draw the customized ToolTip. We need to set the Size of ToolTipRectangle first, getting it from the event args e.Bounds.Size and then all cool stuff of Paint and Graphics can decorate the ToolTip.

void CustomizedToolTip_Draw(object sender, DrawToolTipEventArgs e)
{
        e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
        myToolTipRectangle.Size = e.Bounds.Size;
        e.Graphics.FillRectangle(myBorderBrush, myToolTipRectangle);
        myImageRectangle = Rectangle.Inflate(myToolTipRectangle, 
				-BORDER_THICKNESS, -BORDER_THICKNESS);
        e.Graphics.FillRectangle(myBackColorBrush, myImageRectangle);
        Control parent = e.AssociatedControl;
        Image toolTipImage = parent.Tag as Image; 
        if (toolTipImage != null)
        {
            myImageRectangle.Width = myInternalImageWidth;
            myTextRectangle = new Rectangle(myImageRectangle.Right, myImageRectangle.Top,
            (myToolTipRectangle.Width - myImageRectangle.Right - BORDER_THICKNESS), 
						myImageRectangle.Height);
            myTextRectangle.Location = 
		new Point(myImageRectangle.Right, myImageRectangle.Top);
            e.Graphics.FillRectangle(myBackColorBrush, myTextRectangle);
            e.Graphics.DrawImage(toolTipImage, myImageRectangle);
            e.Graphics.DrawString(e.ToolTipText, myFont, 
			myTextBrush, myTextRectangle, myTextFormat);
        }
        else
        {
            e.Graphics.DrawString(e.ToolTipText, myFont, 
			myTextBrush, myImageRectangle, myTextFormat);
        }
}

Points to Remember

1. We need to set the property OwnerDraw of ToolTip to true in order to customize it.
2. We need to pass the image from Control to CustomizedTooltip class through some property or we can use the property Tag.

History

• 04 September 2009: Updated snapshots
• 03 September 2009: Updated the description of CustomizedToolTip class