ToolTip With Image C#






4.78/5 (28 votes)
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
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
- We need to set the property
OwnerDraw
of ToolTip totrue
in order to customize it. - We need to pass the image from
Control
toCustomizedTooltip
class through some property or we can use the propertyTag
.
History
- 04 September 2009: Updated snapshots
- 03 September 2009: Updated the description of
CustomizedToolTip
class