Cewolf tooltip position

[Matt McCray]

I am working on some jFreeCharts using Cewolf. My problem is the position of the tooltips. When a tooltip is displayed it is nowhere near the pointer. If the page is scrolled the tooltip will scroll with the page regardless of where the pointer is. It seems that my tooltip is positioning relative to the page, not the chart. I can’t seem to find any posts with the same problem.

This problem occurs while using FireFox, so it has to do with overLib.js

[Matt McCray]

I’ve done some research and found that overLib uses nested tables to display tooltips. My problem has to do with global styles applied to table, td and th. Now I just have to figure out how to counteract these styles without changing the existing style sheets. This is an existing web site that is pretty large.

[Matt McCray]

Well I found the solution to my problem. It was being caused by the a few elements position set to absolute. The solution was to add a new variable and changing the code that builds, in overLib.js, the tables slightly. When using inline styling I can now change the table positioning to fixed. This way it remains relative to the browser window.

[Martijn Verburg]

Hi Matt,

Thanks for sharing the solution with us!

[Rey Vincent Babilonia]

Matt McCray wrote:Well I found the solution to my problem. It was being caused by the a few elements position set to absolute. The solution was to add a new variable and changing the code that builds, in overLib.js, the tables slightly. When using inline styling I can now change the table positioning to fixed. This way it remains relative to the browser window.

Hi Matt,

Can you post the code snippets for this? Thank you very much.

Regards,
Rey

[Martijn Verburg]

And welcome to Javaranch Rey!

[Rey Vincent Babilonia]

Thanks for the warm welcome, Martijn.

I can't understand the part of adding a new variable.

The inline styling would probably mean:

// This variable determines if you want to use CSS or inline definitions.
// CSSOFF=no CSS    CSSSTYLE=use CSS inline styles    CSSCLASS=use classes
if (typeof ol_css == 'undefined') { var ol_css = CSSOFF; }

Which one refers to the table part? I saw 3 tables with CSSSTYLE. What will be modified?

if (o3_css == CSSSTYLE) txt = "<TABLE WIDTH="+o3_width+" BORDER=0 CELLPADDING="+o3_border+
" CELLSPACING=0 style=\"background-color: "+o3_bgcolor+"; height: "+o3_height+o3_heightunit+";\">
<TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 style=\"color: "+
o3_fgcolor+"; background-color: "+o3_fgcolor+"; height: "+o3_height+o3_heightunit+";\">
<TR><TD VALIGN=TOP><FONT style=\"font-family: "+o3_textfont+"; color: "+o3_textcolor+
"; font-size: "+o3_textsize+o3_textsizeunit+"; text-decoration: "+o3_textdecoration+"; font-weight: "
+o3_textweight+"; font-style:"+o3_textstyle+"\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";

if (o3_css == CSSSTYLE) txt = "<TABLE WIDTH="+o3_width+" BORDER=0 CELLPADDING="+o3_border+
" CELLSPACING=0 style=\"background-color: "+o3_bgcolor+"; background-image: url("+o3_bgbackground
+"); height: "+o3_height+o3_heightunit+";\"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><FONT style=\"font-family: "+o3_captionfont+"; color: "+o3_capcolor+"; font-size: "
+o3_captionsize+o3_captionsizeunit+"; font-weight: "+o3_captionweight+"; font-style: "
+o3_captionstyle+";\">"+o3_capicon+title+"</FONT></TD>"+closing
+"</TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 style=\"color: "+o3_fgcolor
+"; background-color: "+o3_fgcolor+"; height: "+o3_height+o3_heightunit+
";\"><TR><TD VALIGN=TOP><FONT style=\"font-family: "+o3_textfont+"; color: "+o3_textcolor
+"; font-size: "+o3_textsize+o3_textsizeunit+"; text-decoration: "+o3_textdecoration+"; font-weight: "
+o3_textweight+"; font-style:"+o3_textstyle+"\">"+text+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";

if (o3_css == CSSSTYLE) txt = "<TABLE WIDTH="+o3_width+o3_widthunit
+" BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="+o3_height+o3_heightunit
+"><TR><TD COLSPAN=3 HEIGHT="+o3_padyt+o3_padunit+"></TD></TR><TR><TD WIDTH="
+o3_padxl+o3_padunit+"></TD><TD VALIGN=TOP WIDTH="+(o3_width-o3_padxl-o3_padxr)+o3_padunit
+"><FONT style=\"font-family: "+o3_textfont+"; color: "+o3_textcolor+"; font-size: "+o3_textsize+o3_textsizeunit
+";\">"+text+"</FONT></TD><TD WIDTH="+o3_padxr+o3_padunit
+"></TD></TR><TR><TD COLSPAN=3 HEIGHT="+o3_padyb+o3_padunit+"></TD></TR></TABLE>";

Thanks.

Cheers,
Rey

[Flo Ryan]

Hi All...

I'm struggling with the same problem as Matt McCray but I did not get the solution so far
Can anybody provide me some more details regarding the solution please?
I'm not so familiar with the overlib.js.

Many thanks in advance.

Kind regards Flo

[Martijn Verburg]

And Welcome to Javaranch Flo!

Flo, can't I suggest that you start a new thread with your specific problem?

[Flo Ryan]

Hi Martijn,

I've started a new topic.

http://www.coderanch.com/t/503035/open-source/Cewolf-Tooltip-when-Struts-Tabbedpanel#2268445

Best regards Flo