Click here to Skip to main content
14,454,263 members

ToolTip With Image C#

Rate this:
4.78 (27 votes)
Please Sign up or sign in to vote.
4.78 (27 votes)
3 Sep 2009CPOL
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
Architect 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...

Comments and Discussions

Questionmultiple namespaces Pin
Bear Redbourn13-Nov-19 15:23
MemberBear Redbourn13-Nov-19 15:23 
QuestionSize of the Image portion Pin
Rekless4-Feb-18 9:28
MemberRekless4-Feb-18 9:28 
AnswerRe: Size of the Image portion Pin
John Devron24-Jun-19 19:33
MemberJohn Devron24-Jun-19 19:33 
QuestionUltragrid Tooltip image use c# Pin
Member 1135521226-Mar-17 19:21
MemberMember 1135521226-Mar-17 19:21 
Questionwow Pin
Member 1298228120-Feb-17 1:45
MemberMember 1298228120-Feb-17 1:45 
QuestionGreat Pin
Mohammed A. Elshawaf20-Aug-16 5:57
MemberMohammed A. Elshawaf20-Aug-16 5:57 
QuestionFont size Pin
t_nedelchev24-Feb-14 22:13
Membert_nedelchev24-Feb-14 22:13 
QuestionImage in custom tooltip class instead of tag Pin
Plater20-Aug-13 7:52
MemberPlater20-Aug-13 7:52 
AnswerRe: Image in custom tooltip class instead of tag Pin
Kumar, Ravikant INDIA Bangalore16-Sep-13 22:22
MemberKumar, Ravikant INDIA Bangalore16-Sep-13 22:22 
BugGetting error Pin
s.ukreddy19-Apr-13 4:07
Members.ukreddy19-Apr-13 4:07 
QuestionDatagridview cell Pin
hoerst28-Sep-12 10:14
Memberhoerst28-Sep-12 10:14 
GeneralMy vote of 4 Pin
Burak Tunçbilek25-Jul-12 12:18
MemberBurak Tunçbilek25-Jul-12 12:18 
GeneralRe: My vote of 4 Pin
Kumar, Ravikant INDIA Bangalore29-Jul-12 20:27
MemberKumar, Ravikant INDIA Bangalore29-Jul-12 20:27 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey2-Feb-12 1:04
professionalManoj Kumar Choubey2-Feb-12 1:04 
GeneralRe: My vote of 5 Pin
Kumar, Ravikant INDIA Bangalore29-Jul-12 20:26
MemberKumar, Ravikant INDIA Bangalore29-Jul-12 20:26 
GeneralMy vote of 5 Pin
alifellod2-Aug-11 17:44
Memberalifellod2-Aug-11 17:44 
GeneralRe: My vote of 5 Pin
Kumar, Ravikant INDIA Bangalore16-Nov-11 22:53
MemberKumar, Ravikant INDIA Bangalore16-Nov-11 22:53 
GeneralMy vote of 5 Pin
ChaseForNone17-Mar-11 4:00
MemberChaseForNone17-Mar-11 4:00 
GeneralRe: My vote of 5 Pin
Kumar, Ravikant INDIA Bangalore16-Nov-11 22:52
MemberKumar, Ravikant INDIA Bangalore16-Nov-11 22:52 
GeneralMy vote of 5 Pin
st1410-Jan-11 1:03
Memberst1410-Jan-11 1:03 
GeneralRe: My vote of 5 Pin
Kumar, Ravikant INDIA Bangalore16-Nov-11 22:52
MemberKumar, Ravikant INDIA Bangalore16-Nov-11 22:52 
QuestionWhy I can not set title if "OwnerDraw" is true? Pin
priscila_monica786-Jul-10 11:54
Memberpriscila_monica786-Jul-10 11:54 
AnswerRe: Why I can not set title if "OwnerDraw" is true? Pin
Kumar, Ravikant INDIA Bangalore12-Jul-10 20:19
MemberKumar, Ravikant INDIA Bangalore12-Jul-10 20:19 
GeneralBold Pin
DaveyM694-Sep-09 0:01
professionalDaveyM694-Sep-09 0:01 
GeneralRe: Bold Pin
Ragini Raman4-Sep-09 7:39
MemberRagini Raman4-Sep-09 7:39 

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

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

Posted 3 Sep 2009


77 bookmarked