CSS used for Transparency/Opacity

[BrendonKoz]

I just thought I'd leave a little note for anyone trying to set opacity on their tooltips. Since there's currently no effect for this in the API (that I could see), you'd want to override this in your CSS declarations. Based on the following structure from the documentation:

JS Code

<div class="qtip qtip-stylename">
   <div class="qtip-tip" rel="cornerValue"></div>
   <div class="qtip-wrapper">
      <div class="qtip-borderTop"></div> // Only present when using rounded corners
      <div class="qtip-contentWrapper">
         <div class="qtip-title"> // All CSS styles...
            <div class="qtip-button"></div> // ...are usually applied...
         </div>
         <div class="qtip-content"></div> // ...to these three elements!
      </div>
      <div class="qtip-borderBottom"></div> // Only present when using rounded corners
   </div>
</div>

Your CSS should target the following classes:

JS Code

.qtip .qtip-wrapper .qtip-borderTop,
.qtip .qtip-wrapper .qtip-contentWrapper,
.qtip .qtip-wrapper .qtip-title .qtip-button,
.qtip .qtip-wrapper .qtip-borderBottom,
.qtip .qtip-tip {
   opacity:0.65;
   font-weight:bold;
}

Note: I am only targeting WebKit as my project applies to an Adobe AIR application. For other, non-compliant browsers (cross-browser compliancy), your actual CSS may vary. I add the font-weight:bold there as it makes the text in the tooltips easier to read; again, this may not be necessary for your project. This targets the entire tooltip, setting the proper level of opacity without additional cascading effects messing up the opacity level.

I'm not entirely sure how one would target only the content, but not the border (as the content area itself seems to set a matching border width to the right and left of the content DIV).

[Craig]

Nice tutorials BrendonKoz. Useful tip for those wanting a set opacity and just for clarities sake, heres a modified code to make the opacity cross browser (including IE6-8):

JS Code

.qtip .qtip-wrapper .qtip-borderTop,
.qtip .qtip-wrapper .qtip-contentWrapper,
.qtip .qtip-wrapper .qtip-title .qtip-button,
.qtip .qtip-wrapper .qtip-borderBottom,
.qtip .qtip-tip {
   opacity: 0.65; // Santdard compliant browsers
   -moz-opacity: 0.65; // Firefox and Mozilla browsers
   -webkit-opacity: 0.65; // WebKit browser e.g. Safari
   filter:alpha(opacity=65); // IE7 and below
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=65)"; // IE8
}

[Simon]

This does not seem to work very nicely. The opacity only works in 1 browser with the CSS given above (the cross browser one) and that is Firefox (or any browser that supports the opacity CSS). IE seems to require its filter attributes be set at the top of the style. Firefox seems to want the same with the opacity attribute.

I am sure I must be missing something here so any help on that point would be appreciated. Also I found that I didn't need to define all those styles and it works fine if I just use .qtip { ... }.

Here is what I am currently using:

JS Code

<!--[if IE]>
    <style type="text/css">
    .qtip {
       filter:alpha(Opacity=75); // IE7 and below
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; // IE8
       zoom: 1;
    }
    </style>
<![endif]-->
 
 
    <style type="text/css">
    .qtip {
        opacity: 0.75; // Santdard compliant browsers
        -moz-opacity: 0.75; // Firefox and Mozilla browsers
        -webkit-opacity: 0.75; // WebKit browser e.g. Safari
        zoom: 1;
    }
    </style>

This seems to work except for 1 slight problem. In IE the tooltips fade in to full (no opacity) and then jump to their opacity setting; is there any way to have them only fade to the specified opacity? (this happens correctly in Firefox).

[Craig]

Simon, unfortunately at the moment there isn't a way to specifying a definitive opacity fade-to setting natively. You can try editing the library code directly to solve your problem, possibly by editing the 'show' API function and replacing the 'fadeIn' to an animate statement with a set opacity?

[Simon]

Thanks craig. I gave the custom animation a shot but am having a few problems. I have it now so that it works and fades to the correct opacity except on the very first time you hover over the target. The first time it doesn't seem to do the animation at all, it just suddenly appears (no fade in) and then changes to the correct opacity. So it flashes black (in my case) and then switches instantly to 0.75 opacity.

Here is the code I have changed - it is kind of strange and I'm hoping you can help me since you probably know the inner workings of your own code and jquery better than me. I am using fadeTo, but this doesn't seem to 'show' the tooltip like fadeIn does so I had to add the extra show. This also caused a problem where (in IE8) the tooltip would be sliding upwards, as if moving to the correct position, as it was fading in. This is why I added the callback function to do the fadeTo.

To show the tooltip:

JS Code

case 'fade':
    self.elements.tooltip.css('opacity', 0);
    self.elements.tooltip.show(1, function() {
        self.elements.tooltip.fadeTo(self.options.show.effect.length, 0.75, afterShow );
    });
    break;

To hide the tooltip:

JS Code

case 'fade':
    self.elements.tooltip.css('opacity', 0.75);
    self.elements.tooltip.fadeTo(self.options.show.effect.length, 0, function() {
        self.elements.tooltip.hide();
        afterHide();
    });
 
    break;

I had to add the hide in the fade code because otherwise the tooltip could only be shown once, after the first fade it would never come back if you hovered over the target again. Also setting the opacity to 0.75 (what I thought it should have been anyway) was required otherwise the tooltip jumped back to opacity 1 before fading out.

Any help would be appreciated!

[Simon]

Just thought I would also mention that this all works fine in Firefox and, funnily enough, IE7 (well IE8 in IE7 mode). Its only IE8 in standards mode that this is a problem.

Also I just tested to see if turning prerendering on made any difference and unfortunately it didn't

[Craig]

Simon, I've seen quite a few sites use the above code and it appeared to work flawlessly even in IE6. Do you have a test page we can look at to demonstrate?

[smlong426]

craig Wrote:Simon, I've seen quite a few sites use the above code and it appeared to work flawlessly even in IE6. Do you have a test page we can look at to demonstrate?

The CSS works fine, but there is one problem. Text becomes opaque as well. Is there any way to simply use a PNG with transparency to achieve the same effect without affecting the contents of the tooltip?

Thanks,
Stephen