Semi-transparent background image for Tooltips

Page: 1

Author Post
Member
Registered: Apr 2009
Posts: 56
Is there any way to have an opacity value for a tooltip background image?
I'm trying to tile a black background png inside a tooltip with an opacity value of say 40%,
so the underlying content below a tooltip shows through somewhat. I don't want to use CSS opacity because it's not supported in all browsers?

FYI, inserting the PNG with boxBackgroundImage doesn't seem to work on a tooltip.
I can get it to work
with a separate style sheet, but the default tooltip box color shows through
under my png image. The overall result is the box looks opaque rather than transparent. So my black png with a 40 percent opacity
appears solid gray because it's overlaying the default white tooltip background of #FFFFFF.

Doable?
Administrator
Registered: Aug 2008
Posts: 3382
boxBackgroundImage isn't what you're looking for. It does not set the background for the floatbox's content area but rather applies a repeating background-image to the floatbox frame area, around and outside of the content. This option should have no effect on tooltips because the default padding (frame width) for tooltips is 0.

The contentBackgroundColor option sets the background color for the content area (behind the png) but unless you've got a transparent floatbox, setting this to 'transparent' will just allow it to show the floatbox component color underneath.

Keep in mind that an enhanced tooltip is really just another standard floatbox with certain appearance options set. I think what you want is to use the built-in set of 'transparent' classOptions with no round corners. Add "className:transparent roundCorners:none" to your tooltip options and you will get a transparent tooltip, including the background of the content area.

Opacity can be reliably set on the tooltip content by using css opacity for well-behaved browsers and an alpha filter for older IE. Assign both opacity:0.4; and filter:Alpha(Opacity=40); to the element(s) of interest. If you prefer, these styles can be added in a callback script in the data-fb-tooltip options such as:
afterItemStart:`fb.fbContent.style.opacity='0.4'; fb.fbContent.style.filter='Alpha(Opacity=40)';`
Member
Registered: Apr 2009
Posts: 56
This works 100% with the code Admin outlines above.

If someone tries this out, you should probably dismiss my first post about opacity settings and boost up your opacity value near 70-80%. Otherwise, the underlying content shows through too much and you can't read the text. I also think it would probably work a lot better on a white, or light background with a text value of black #000000. I was trying it on a darker background with white text #FFFFFF and it was not legible. Maybe this post will save you some time.

Cheers.

Page: 1