This is a migrated thread and some comments may be shown as answers.

Firefox bug with tooltip opacity

8 Answers 108 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 07 Apr 2009, 03:25 AM
I have several links and images in a panel that I put RadToolTips on in this manner:
RadToolTip tpDetailsGuests = new RadToolTip();
                tpDetailsGuests.ShowEvent = ToolTipShowEvent.OnMouseOver;
                tpDetailsGuests.Skin = "Vista";
                tpDetailsGuests.Position = ToolTipPosition.BottomCenter;
                tpDetailsGuests.Width = new Unit("300px");
                tpDetailsGuests.Height = new Unit("250px");
                tpDetailsGuests.OffsetX = 20;
                tpDetailsGuests.Animation = ToolTipAnimation.Fade;
                tpDetailsGuests.Sticky = true;
                tpDetailsGuests.IsClientID = true;
                tpDetailsGuests.ContentScrolling = ToolTipScrolling.Auto;
                tpDetailsGuests.TargetControlID = "showAllGuests";
                tpDetailsGuests.Text = txtGuests.ToString();
                Panel_GuestListing.Controls.Add(tpDetailsGuests);

And since upgrading to the 2009 controls this has stopped working in Firefox.  The first mouse over shows this in the bug tracker in firefox
<div id="RadToolTipWrapper_ctl00_PageCode_ctl07" class="RadToolTip_Vista rtVisibleCallout" unselectable="on" style="position: absolute; z-index: 8000; visibility: visible; left: 415px; top: 109px; width: 300px;">

What I have found is that if I mouseover and mouse off before the tooltip finishes loading the opacity stays at a number below one bug tracker shows this.
<div id="RadToolTipWrapper_ctl00_PageCode_ctl07" class="RadToolTip_Vista rtVisibleCallout" unselectable="on" style="position: absolute; z-index: 8000; left: 400px; top: 112px; width: 300px; opacity: 0.0170707; visibility: visible; display: none;">

And once the opacity is set below one, i can't get it back to one to display correctly.  This from what my brief testing shows is that it only happens with the Fade ToolTipAnimation.  I'm in FireFox 3.0.8. 

8 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 08 Apr 2009, 01:47 PM
Hi John,

We are not aware of such problem and in the common case it does not occur - please examine the test demo I prepared based on your code.

In case the problem persists, please modify my demo in order to show the problem, open a new support ticket and send it to me along with detailed explanations and a few screenshots of the very same demo with the problem clearly marked. Once we observe the issue and get a better understanding on it, we will do our best to help.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
John
Top achievements
Rank 1
answered on 08 Apr 2009, 02:55 PM
Hi Svetlina,

I'm starting a support ticket now, but with the attached project in FireFox 3.0.8 I am able to see this issue without changing any of the code.  Hopefully my screen shots will help.

John
0
Richard
Top achievements
Rank 1
answered on 08 Apr 2009, 08:49 PM
Agreed, I experience the exact same problem with RadToolTip in FF 3.0.8.

Under normal circumstances the bug is very difficult to replicate, as you have to move your mouse off of the tooltip just as it is fading in to cause it to take the lower than 1.0 opacity as the maximum (likely a jQuery fade animation problem).

However, as soon as you either use a RadToolTipManager and apply it to multiple elements next to each other, or use multiple RadToolTip's next to each other, and modify the tooltip properties to decrease delays for show/hide, simply panning your mouse quickly over items can result in the tooltips rapidly disappearing completely, never to show again.

A very quick fix you can use should you experience the issue is to create a javascript function as follows:

function fixToolTipOpacity(sender, eventArgs) {  
     sender._popupElement.style["opacity"] = "1.0";  
}  
 

And then attach it to the OnClientHide client event for the ToolTip/ToolTipManager. This then forces the tooltip to reset to 1.0 opacity after it has hidden, ensuring that when jQuery tries to fade in again, it knows what it has to fade to.

Naturally this fix only really applies to FF, and was just something quickly whipped up to resolve the issue I was experiencing, I have no idea as to whether this bug appears in IE7/8, nor whether this fix works in any other browser which supports the opacity CSS property.
0
Richard
Top achievements
Rank 1
answered on 08 Apr 2009, 08:58 PM
Just to add, you can see a similar problem if you set the RadToolTip to resize instead of fade and perform the same actions, you'll notice that while the RadToolTip will always resize appropriately (so it doesn't size half way or anything), the callout icon never shows (or only partially shows).

I'm not sure if this is a problem with every tooltip position, but the situation above occurred when the position was below center.
0
John
Top achievements
Rank 1
answered on 08 Apr 2009, 09:02 PM
Thanks Richard, your solution is a good temp fix.  Hopefully there can be a proper fix soon in the telerik code.  Glad I'm not just seeing things and that someone else was able to duplicate it.

john
0
Richard
Top achievements
Rank 1
answered on 08 Apr 2009, 09:04 PM
A quick test in IE8 shows that the problem with the opacity, while not as bad as in FF, exists there as well.

In IE jQuery seems to force full visibility when the fade completes, so you'll not have a situation where your tooltips are half faded out or anything when they should be completely visible, however you'll still notice that the fade effect only seems to fade for a fraction of the way before "popping" to full visibility, and while not mission critical, but does mean the overall presentation of what you're trying to do (whether a web app or straight website) does suffer.
0
Richard
Top achievements
Rank 1
answered on 08 Apr 2009, 09:13 PM
Hi John,

I hope so too, I love the RadControls stuff (will buy a license as soon as I get enough cash together - busy using the demo), and while in general the quality is exceptional and they truly do facilitate a R.A.D. approach to web dev - especially on their more large-scale components such as tabstrips, menubars, toolbars, etc. there are some controls that are clearly still very much a work in progress.

The tooltip is the one component I've struggled with the most and had behave in the most unpredictable manner. I can't wait until they iron out all the kinks though, because even in its currently uneven state it's a great component.
0
Svetlina Anati
Telerik team
answered on 09 Apr 2009, 02:19 PM
Hello guys,

Thank you for clearing the reproduction steps, we were able to reproduce the problem and we already fixed it. Basically, the approach offered in this forum post is the correct one but we suggest to make it even more general by setting the opacity to an empty string instead of to 1.0. In this manner, if custom skins with some opacity set for the tooltip will also work and the opacity setting if there is such will be taken from the CSS.

Since the issue is already fixed it will be available in the next internal build and in future official releases. For the time being we suggest to use the already discussed workaround.
 
I am glad to hear that you like the RadToolTip control and to inform you that we are currently working on making it more consistent, intuitive and even easier to use.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Tags
ToolTip
Asked by
John
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
John
Top achievements
Rank 1
Richard
Top achievements
Rank 1
Share this question
or