Add tooltip to dynamically generated graphics

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

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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:
sanagarwlAuthor Commented:
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:
Angular Fundamentals

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

sanagarwlAuthor Commented:
So you need to use javascript or jQuery to display the tooltip, here are a few examples:
Javascript example:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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: 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
sanagarwlAuthor Commented:
In the end I went ahead with the solution of using image maps!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.