Title: Make owner drawn tooltips with pictures in C#

This example displays owner drawn tooltips for each of its buttons. It draws an image to the left of the text assigned to each button's tooltip.

To make owner drawn tooltips, first add a Tooltip component to the form and set its OwnerDraw property to true.

The Tooltip component is an extended provider that adds a new ToolTip property to each of the controls on the form. For example, the Tooltip component in the example program is named tipButtons so it adds a new property called "ToolTip on tipButtons" to each of the example's buttons. You can set the controls' tooltip text at design time or at run time.

The Tooltip component's Draw event handler draws the controls' tooltips. That event handler cannot set the size of the tooltip's area, but the component's Popup event handler can. The following Popup event handler executes before the tooltip appears.

private const int Margin = 10; // Set the tooltip's bounds. private void tipButtons_Popup(object sender, PopupEventArgs e) { int image_wid = 2 * Margin + Properties.Resources.happy.Width; int image_hgt = 2 * Margin + Properties.Resources.happy.Height; int wid = e.ToolTipSize.Width + 2 * Margin + image_wid; int hgt = e.ToolTipSize.Height; if (hgt < image_hgt) hgt = image_hgt; e.ToolTipSize = new Size(wid, hgt); }

This code gets the size of the image stored in the resource Properties.Resources.happy and adds a margin of 10 pixels.

The code then gets the size needed by the tooltip's text from the e.ToolTipSize parameter. It adds the image's width to the text's tooltip's width. It also ensures that the allowed height is big enough to hold the image. After calculating the necessary size, the code saves it in the e.ToolTipSize parameter so the Tooltip component knows how much room the program needs.

When the tooltip is displayed, the following Draw event handler draws the tooltip picture and text.

// Draw the tooltip. private void tipButtons_Draw(object sender, DrawToolTipEventArgs e) { // Draw the background and border. e.DrawBackground(); e.DrawBorder(); // Draw the image. e.Graphics.DrawImage(Properties.Resources.happy, Margin, Margin); // Draw the text. using (StringFormat sf = new StringFormat()) { sf.Alignment = StringAlignment.Near; sf.LineAlignment = StringAlignment.Center; int image_wid = 2 * Margin + Properties.Resources.happy.Width; Rectangle rect = new Rectangle(image_wid, 0, e.Bounds.Width - image_wid, e.Bounds.Height); e.Graphics.DrawString( e.ToolTipText, e.Font, Brushes.Green, rect, sf); } }

This code uses the DrawToolTipEventArgs parameter's DrawBackground and DrawBorder methods to draw the normal tooltip background and border. It then uses the e.Graphics object's DrawImage method to draw the image moved down and to the right by the margin distance.

Next the code creates a StringFormat object to align the tooltip text. It sets the object's properties to center the text vertically and align on the left horizontally. (Look at the picture above to see how the text is aligned.)

The e.Bounds parameter is a rectangle with upper left corner at (0, 0) that indicates where the tooltip should be drawn. The code then calculates the width of the image plus its margins. It then uses that width and the e.Bounds rectangle to find a new rectangle where the text should be drawn. The code finishes by drawing the tooltip's text inside that rectangle.

Download the example to experiment with it and to see additional details.