We help IT Professionals succeed at work.

Add tooltip to dynamically generated graphics

sanagarwl asked
Is there a way to add popups/tooltips to a image that is being dynamically generated.

This image is essentially a graph specific to our business needs and I've constructed the graph on the fly and all is working well.

However, an additional functionality required is that when once mouseovers on specific data elements then a helpful tooltip should appear.

I'm using the system.drawing and the system.drawing.imaging namespaces

In the attached code can I do something like:
 _objGraphic.DrawTooltip giving the coordinates and a helpful tip?


_objGraphic.DrawRectangle(new Pen(grade.ScoreColor(dataPointLevel + 2)), 
                                        grade.MapScore(WidthInnerRectange,HieghtInnerRectange,9, OffsetY, OffsetX, dataPointLevel + 2).X,
                                        grade.MapScore(WidthInnerRectange, HieghtInnerRectange, 9, OffsetY, OffsetX, dataPointLevel + 2).Y, pointWidth, pointHeight);

                    _objGraphic.FillRectangle(new SolidBrush(grade.ScoreColor(dataPointLevel + 2)),
                                              grade.MapScore(WidthInnerRectange, HieghtInnerRectange, 9, OffsetY, OffsetX, dataPointLevel + 2).X,
                                              grade.MapScore(WidthInnerRectange, HieghtInnerRectange, 9, OffsetY, OffsetX, dataPointLevel + 2).Y, pointWidth, pointHeight);

Open in new window

Watch Question

The tool tip info does not reside in the image itself so you don't have to do anything with _objGraphic.

You have to add the tooltip displaying in the place where you are using the image, for example to the image tag in html.

You can use 'alt' property of the img tag or you want something more advanced you have to find a javascript script, something like this:



I actually need to position mouseovers on different locations on the image - this is a dynamically generated custom graph and I need to give additional information the the user via mouse overs when they get to specific locations on the graph and these specific locations/ points are generated at run time

The important question here is where & how you use the image, in a webpage or you have a windows application or somewhere else?

You can do what you need with jquery in a web page:


So you need to use javascript or jQuery to display the tooltip, here are a few examples:
Javascript example: http://www.dynamicdrive.com/dynamicindex5/texttool.htm
Jquery: http://jquery.bassistance.de/tooltip/demo/
If the image only displays rectangles, you might consider using colored and position:absolute divs in stead, giving them each a "title" or a mouseOver-event for the tooltip (or use a pure-css tooltip. Disadvantage is that you can not download the image.

If you want it to be an image, and the tooltip can be different for image location, you need the mouse-coordinates over the image and correlate that to a tooltip. The first is not so hard, code can be found all over the web (for example here: http://www.switchonthecode.com/tutorials/jquery-snippet-relative-mouse-position is a jquery solution).

The second part means that you have to pass the necessary coordinates to a javascript function that handles the mouseover on the image. It depends on the complexity of your generated images how hard that is. You can basically do it in two ways:
- calculate them parallel with image-generation, based on the same data.
- have the image-generator calculate them

In both cases it would result in something like

<img src="yourgeneratedimage.aspx" onmouseover="showtooltip(this)" />

function showtooltip(oImg) {
    //fixed: get mouse coordinates as mouseX and mouseY
    //dynamically generated
    if(mouseX > 200 && mouseX < 400 && mouseY > 10 && mouseY < 200) {
        oImg.title = 'some message'; // or however you want to display the tooltip


In the end I went ahead with the solution of using image maps!