URGENT : Multi-lines tooltips with ImageMap (not APPLET)

linhvn0110 · Post by **linhvn0110** » Thu Jan 04, 2007 5:33 am

Hi All!
I'm using JFreeChart to generate charts on web pages using Struts and JSP. Everything is ok but there's an issue that I don't know how to solve. That is: When displaying chart in JSPs (as images, not APPLET), the tool tip of each area of image should be multi-lines toolptip, not on one line as default. So if anyone know how to solve this issue, please help me. It's very urgent!
I tried to insert "<html> line 1 <br> line 2 <br> line 3</html>" so that I can display 3 lines in tooltips but it didn't work as desired (just on the same line)
So please help me if you know the solution.

Regards,
Linh Nguyen.

ahill · Post by **ahill** » Mon Jan 08, 2007 3:08 am

Hi Linh,

This is an html / browser limitation. Normal tooltips in html use the title attribute to set a tooltip for the link, and it doesn't take html, just text. The normal JFreeChart tooltips are generated using the org.jfree.chart.imagemap.StandardToolTipFragmentGenerator. Looking at the code its clear how it works:

Code: Select all

package org.jfree.chart.imagemap;
public class StandardToolTipTagFragmentGenerator 
    implements ToolTipTagFragmentGenerator {

    public String generateToolTipFragment(String toolTipText) {
        return " title=\"" + toolTipText + "\" alt=\"\"";
    }
}

In Internet Explorer is possible to to get a multiline display just by using the carriage return character in the text (you will want to ensure its entity &#013; is what gets rendered in the html rather than an actual carriage return of course). Unfortunately this is ignored by FireFox, and in Mozilla it comes up at an ugly character in the popup instead of a new line.

I believe both browsers also limit the number of characters in the tooltip

No idea what Opera, Safari, etc... do with regards to the above.

To get multiline tooltips working across browsers JavaScript is required. There are a number of script libraries available for doing this. Using one of them in JFreeChart shouldnt be very difficult. In most cases you would need to link the javascript js file from your page and then invoke it from the tags that JFreeChart outputs.

This would usually mean plugging in your own implementation of org.jfree.chart.imagemap.ToolTipFragmentGenerator to generate the necessary onmouseover attributes and so forth but in fact looking in the imagemap package I see that JFreeChart already comes with implementations for some script from DynamicDrive and for the popular OverLIB tooltip script by Erik Bosrup.

In fact the ttf generator for OverLIB is very simple. A brief glance at its code shows how it works:

Code: Select all

package org.jfree.chart.imagemap;
public class OverLIBToolTipTagFragmentGenerator 
    implements ToolTipTagFragmentGenerator {

    public String generateToolTipFragment(String toolTipText) {
        return " onMouseOver=\"return overlib('" + toolTipText 
            + "');\" onMouseOut=\"return nd();\"";
    }
}

OverLib seemed to work nicely in Mozilla, Firefox, and IE when I did some brief experimenting with it this morning. Of course I havent tested it across all browsers or anything like that, so you will need to research its level of support yourself. You will also need to go the OverLIB site to download the overlib.js which you will need to link from the head of your page (with the src pointing at where you put it in your webapp - make sure its not under WEB-INF or it wont be visible to the browser!):

Code: Select all

<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

Overlib supports the use of html in the tooltip (so you use <br/> for newlines - (and not &#013 ; as that will cause a JS error!)) This also means you can do more fancy things in those tooltips too.

Then use the org.jfree.chart.imagemap.OverLIBToolTipFragmentGenerator when you call ImageMapUtilities.getImageMap().

linhvn0110 · Post by **linhvn0110** » Mon Jan 08, 2007 5:37 am

Hi !
Thanks a lot for your helps!
I also find out the root cause of my issue. Ya, you 're right! This is the issue of Mozilla FireFox. When I test on IE, the graphs generate the tooltips in multiline format as I desired but with FireFox, it doesn't work. I used the cariage returns in the tooltips (\r\n) to break lines. So thanks a lot for your helps.
Also, I got the OverLIB library on Wikipedia as you mentioned. Ya, that's great! But actually, I don't knom how to use it, so could you please help me to explain more this library and how to use it?
Best wishes for you!

Sincerely regards,
Linh Nguyen.