You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

IE PNG/Opacity Bug in Tooltips Created Aug 30, 2009

This thread is solved

Views: 5034     Replies: 21     Last reply Dec 14, 2010  
You must login first before you can use this feature

DLSalahi

Posts: 3

Registered:
Aug 26, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Aug 30, 2009

Given that Internet Explorer does an awful job of rendering PNG alpha transparency when used in combination with its opacity filter it would really be nice to have a way to turn off the use of opacity in Tooltip. This would allow me, for example, to use a tooltip with a drop shadow. The background image would be a PNG with alpha transparency. IE renders the drop shadow just fine in IE7/8. But when you add the opacity filter, it goes crazy. I'm sure you're familiar with the problem. Your basic tooltip demo exhibits the problem.

So, I could live quite happily without an overall transparency applied to my background image. But I can't live with the horrible mess that results when opacity is applied. So, how about an option to turn off opacity processing entirely?

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» IE PNG/Opacity Bug in Tooltips

Posted: Aug 31, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from DLSalahi
This issue is resolved on the upcoming jQuery Tools 1.1. Will be out this week.

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 8, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
Hi Tero,

I hope you can get the solution as soon as possible.
Good luck and thanks for your help!

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» IE PNG/Opacity Bug in Tooltips

Posted: Sep 8, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
Well. The latest version solves this issue in the best possible way. The opacity processing is (by default) in IE. Look for the slideFade configuration property from the Tooltip documentation:

http://flowplayer.org/tools/tooltip.html#slide

DLSalahi

Posts: 3

Registered:
Aug 26, 2009

Nice!

Posted: Sep 8, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
This looks great! In fact, this release looks like it brings a lot of great new features. Can't wait to try them all.

Thanks!
David Salahi

aigumnov

Posts: 36

Registered:
Apr 18, 2009

» » IE PNG/Opacity Bug in Tooltips

Posted: Sep 8, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
Just for information: in fact, IE does support PNG24/PNG32 fading transitions, but not in the way like jquery does that.

You have to wrap the element, which you want to fade into another DIV and then apply Fade filter (or BlendTrans in 4.0 notation) to that external wrapper.

http://msdn.microsoft.com/en-us/library/ms532990(VS.85).aspx

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 8, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
Hi Terro,

Thank you for your quick replay and the useful link, but please where can i add this 'slideFade' property?

Thanks also to aigumnov for the useful link :)

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» IE PNG/Opacity Bug in Tooltips

Posted: Sep 9, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
This slideFade is just a normal configuration property for the tooltip.

And "aigumnov": thanks for this MSDN link. I have some mixed feelings about those Microsoft hacks and should I respect those on my code or leave it up to the user to implement them.

aigumnov

Posts: 36

Registered:
Apr 18, 2009

» » IE PNG/Opacity Bug in Tooltips

Posted: Sep 9, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
If you ask me, I don't think you should implement msfilter transitions within this particular tooltip plugin. Such things should be abstract; maybe it could be another jQuery plugin which somehow overload or extend generic animation methods of jQuery. Such plugin could be loaded on-demand with MSIE's conditional comments.

Not everybody has alpha-transparent images on their tooltips. The element's transparency and/or fading doesn't always fit site design. Thus, it is enough to have addEffect and let users implement their own transitions.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» » » IE PNG/Opacity Bug in Tooltips

Posted: Sep 9, 2009

Reply to: » » IE PNG/Opacity Bug in Tooltips, from aigumnov
agree.

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 9, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
Hi there,

First, thanks for your help...and the effort you are doing, this is great.

Well, i just download the file called "tools.tooltip-1.1.0.js" and modified the property slideFade to true. But, nothing happens???

Maybe I need to add this msfilter!!

Please can you advise me to resolve this Opacity Bug.

Thanks to you Tero and also aigumnov

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» IE PNG/Opacity Bug in Tooltips

Posted: Sep 9, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
To remove the slideFade you don't need to touch the source code. All you need is to disable it as follows


$(".mytrigger").tooltip({
  slideFade: false
});

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» IE PNG/Opacity Bug in Tooltips

Posted: Sep 9, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
To remove the slideFade you don't need to touch the source code. All you need is to disable it as follows


$(".mytrigger").tooltip({
  slideFade: false
});

May I also see the page that has the (possible) opacity bug?

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 10, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
Hi Tero,

The tooltip link

The tooltip is working localy in both Firefox and IE6, unfortunately in a remote server is not working in IE6 as you will see.

Just for information:
I have Firefox/3.0.12 and IE Tab - an extension embedding Internet Explorer in tabs of Mozilla/Firefox...

Here is a link if you want to download it

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 10, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
Hi,

Sorry, I just added the "tools.tooltip-1.1.0.js" file and now it's working in both FF and IE6.

Here is the link again

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 11, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
Hi Tero,

Do you see the link above?

As you can see, this alpha-transparency images is not resoved with IE6 yet.

Please can you help?

Thanks in advance!

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 11, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
Hi again,

Here is a link that is showing the tooltip using IE6

As you will see the transparency is not applied!

Any help is very appreciated :)

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1867

Registered:
Nov 16, 2007

» IE PNG/Opacity Bug in Tooltips

Posted: Sep 11, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
yes indeed. this is what is supposed to happen. the best results will be seen if those PNG images are replaced with JPG's or GIF's on IE6. The tooltip fixes the "black box" bug that happens on IE. See the details here

http://flowplayer.org/tools/using.html#png24

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 14, 2009

Reply to: » IE PNG/Opacity Bug in Tooltips, from tipiirai
Hi,

Thanks for your replay and all the effort you are doing in this forum, bravo :)

I will replace the PNG images with JPG's or GIF's as you told me and we will see the result.

Thanks again Tero and have a nice day!

jquery55
http://www.http://casa-annonces.info/

Posts: 25

Registered:
Jul 28, 2009

IE PNG/Opacity Bug in Tooltips

Posted: Sep 14, 2009

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
Hi,

I tested to images that i created with photoshop and saved them as .jpg and .gif but unfortunately the background image is still there!!

Please do you have a link on how these .jpg and .gif cane be done?

I also added the second line of code in css:

background:transparent url(../_images/tooltips/black_arrow.png);
_background: url(../_images/tooltips/black_arrow.jpg); /* IE6 only */

jaydevpinara

Posts: 1

Registered:
Mar 17, 2010

» IE PNG/Opacity Bug in Tooltips

Posted: Mar 17, 2010

Reply to: IE PNG/Opacity Bug in Tooltips, from jquery55
I tried the plug-in below and it fixed the transparency issue for me.
http://jquery.andreaseberhard.de/pngFix/

•