C# – ToolTip – Display image properties

In our previous article, “C# – Graphics – Display an Image“,  we have discussed displaying an Image using .Net Graphics and Image classes. In this article, I would like to extend our previous program to show the ToolTip with the details of the Image, when we move the cursor on the image.

ToolTip is a small rectangular area, where it displays some useful information when the user moves the mouse over the control. This is one of the useful features to give a brief description of the control, and it enables the user to understand the purpose of the Control.

Lets’ extend our earlier program to add ToolTip to it.

Step 1. Add ToolTip control to the form. Change the name of the tooltip to the relevant name. I gave toolTipImage name to the tooltip control.

Step 2. Select the ToolTip control, what we have added to the Windows Form; and change its’ properties like below:

Set the value of ToolTipTitle property to “Image Attributes“. This is the title of the ToolTip; not the text displayed in the tooltip.

Change ShowAlways property to “True“. To show the tooltip always; when the user move the cursor over the image.

Step 3. Keep the default Delay values for the tooltip control. These values determine, how & when to show the control.

Step 4. Now we have to add the text to display on the ToolTip when we move the mouse. The text contains, image attributes that we have loaded & displayed on the form. We get these details from Image object.

And once the text is ready, we need to set it by calling ToolTip’s method SetToolTip.

Step 5. Here is the code for this. We have extended our previous program; where we have displayed the image on the Windows Form.

        private void btnDraw_Click(object sender, EventArgs e)
        {
            if (img == null)
            {
                img = Image.FromFile(@"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg");

                toolTipImage.SetToolTip(this, 
                    String.Format("Width: {0}\nHeight: {1}\nResolution (Horizontal): {2}\nResolution (Vertical): {3}", 
                    img.Width, img.Height, img.HorizontalResolution, img.VerticalResolution));
            }

            this.Refresh();
        }

Step 6. Build & Run the program. Click on the Draw button to load & display the image.

Once the image is displayed, move the mouse over the image; and observe that; ToolTip was displayed with image details.

Please add your comments about this article.

(Raju)