Click here to Skip to main content
Click here to Skip to main content
Go to top

ToolTip With Image C#

, 3 Sep 2009
Rate this:
Please Sign up or sign in to vote.
It is a customized ToolTip that can display text with Image. We can configure size and border color too. It is built on .NET 2.0 Platform
ToolTip With Image


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.


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;
            Size oldSize = e.ToolTipSize;
            Control parent = e.AssociatedControl;
            Image toolTipImage = parent.Tag as Image;
            if (toolTipImage != null)
                myInternalImageWidth = oldSize.Height;
                oldSize.Width += myInternalImageWidth + PADDING;
                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.

Normal Size 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:

ToolTip with user defined size

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, 
        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), 
            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);
            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.


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Kumar, Ravikant INDIA Bangalore
Software Developer (Senior) Philips
India India
Have been working with computers since the early 00's. Since then I've been building, fixing, configuring, installing, coding and designing with them. At present I mainly code windows applications in C#, WCF, WPF and SQL. I'm very interested in Design Patterns and try and use these generic principles in all new projects to create truly n-tier architectures. Also I like to code for making the User Interface very attractive...
Follow on   Twitter

Comments and Discussions

QuestionFont size Pinmembert_nedelchev24-Feb-14 21:13 
QuestionImage in custom tooltip class instead of tag PinmemberPlater20-Aug-13 6:52 
AnswerRe: Image in custom tooltip class instead of tag PinmemberKumar, Ravikant INDIA Bangalore16-Sep-13 21:22 
BugGetting error Pinmembers.ukreddy19-Apr-13 3:07 
QuestionDatagridview cell Pinmemberhoerst28-Sep-12 9:14 
GeneralMy vote of 4 PinmemberBurak Tunçbilek25-Jul-12 11:18 
GeneralRe: My vote of 4 PinmemberKumar, Ravikant INDIA Bangalore29-Jul-12 19:27 
GeneralMy vote of 5 Pinmembermanoj kumar choubey2-Feb-12 0:04 
GeneralRe: My vote of 5 PinmemberKumar, Ravikant INDIA Bangalore29-Jul-12 19:26 
GeneralMy vote of 5 Pinmemberalifellod2-Aug-11 16:44 
GeneralRe: My vote of 5 PinmemberKumar, Ravikant INDIA Bangalore16-Nov-11 21:53 
GeneralMy vote of 5 PinmemberChaseForNone17-Mar-11 3:00 
GeneralRe: My vote of 5 PinmemberKumar, Ravikant INDIA Bangalore16-Nov-11 21:52 
GeneralMy vote of 5 Pinmemberst1410-Jan-11 0:03 
GeneralRe: My vote of 5 PinmemberKumar, Ravikant INDIA Bangalore16-Nov-11 21:52 
QuestionWhy I can not set title if "OwnerDraw" is true? Pinmemberpriscila_monica786-Jul-10 10:54 
AnswerRe: Why I can not set title if "OwnerDraw" is true? PinmemberKumar, Ravikant India Bangalore12-Jul-10 19:19 
GeneralBold PinmvpDaveyM693-Sep-09 23:01 
GeneralRe: Bold PinmemberRagini Raman4-Sep-09 6:39 
GeneralImages are broken. PinmemberRaghu Karupakala3-Sep-09 7:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140905.1 | Last Updated 4 Sep 2009
Article Copyright 2009 by Kumar, Ravikant INDIA Bangalore
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid