Semi-Transparent Tooltips

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
I use Floatbox tooltips at the moment but one particular flavour that I use is a bit over-dominant. I would like to make it a bit less obvious by making it semi-transparent. Is there any way of doing this? (I found one previous post on this forum on a simiar topic but the suggestions there didn't work for me.) I would simply like to apply opacity:0.7 to the background colour.

Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
Floatbox doesn't have a built in option or mechanism for setting the overall opacity of the floatbox. (A tooltip is just a variant of a standard floatbox.)

If you're a little bit handy with javascript, you could try assigning an afterBoxStart function which sets opacity on fb.fbBox. It would of course also have to set filters for old IE that does not understand opacity, or else just let old IE show it at full opacity.

But you mentioned "the background color", so maybe you don't want the whole box to be faded??? If it's just the content background you want to target, that tooltip content is provided by you and can be styled anyway you want with normal css. You may want to place "className:transparent" in your data-fb-tooltip attribute options to let your content see through to the underlying page.
Member
Registered: Jan 2012
Posts: 98
As I'm definitely not "handy with Javascript", I moved on to your third paragraph. Although I was able to mess about with the colour of the content background, and even the opacity, I never managed to get any of the underlying image to show through. I think that's probably because any opacity set on the background colour of the content just lets the box colour show through instead. Does that make sense?

Reluctantly I've given up and changed position, shadow and corner radius settings to make the tooltip a little more subtle. It's a shame because I wanted to replicate the look I had in the past when I used Zebra Tooltips. I can't be doing with having both Floatbox and Zebra though.

Thanks.
Administrator
Registered: Aug 2008
Posts: 3382
I think you gave up on the afterBoxStart function before even trying it. afterBoxStart:`fb.fbBox.style.opacity=0.7`works quite well for me. Don't forget the backquotes.
Member
Registered: Jan 2012
Posts: 98
Yes, I did give up pretty quickly because I don't understand Javascript and couldn't see what to do with it. However I've now pasted your code into what I think is the appropriate place. I can see something going on, but it's still not doing what I want. My code on the page is
<div id="ttPhoto" style="color:#2f4e8c;display:none">Click this picture for the Photo Gallery</div>
<a href="../images/<?php echo $row_hotel[&#039;foto1_filename&#039;];?>" class="floatbox" alt="<?php echo $row_hotel[&#039;foto1_alt&#039;];?>" data-fb-options="group:1 caption:`<?php echo $row_hotel[&#039;f_title&#039;];?>`">
<img src="../images/<?php echo $row_hotel[&#039;f_filename&#039;];?>" class="fbTooltip phototip" data-fb-tooltip="source:#ttPhoto afterBoxStart:`fb.fbBox.style.opacity=0.2`" alt="<?php echo $row_hotel[&#039;f_alt&#039;];?>" width="480" height="276" border="0"></a>

With a very low value of opacity I can see a momentary flash of transparency as the tooltip appears but it then goes opaque. To check I wasn't imagining it, I changed opacity to 1.0 and the momentary transparency goes away. So it looks to me as if the callback is applying transparency to either the content background colour or the box colour, but not both.

Perhaps I'm still not applying this right.
Administrator
Registered: Aug 2008
Posts: 3382
Oh, yeah, the tooltips do their own fade in of opacity on fbBox from 0 to 1 when starting up. Sorry, I don't have a solution for you. Floatbox tooltips are shown with an opacity of 1.
Member
Registered: Apr 2013
Posts: 6
Solution for Semi-Transparent Tooltips

It wasn't mentioned here but the solution lies in remembering that Floatboxes, tooltips, etc. can all be made completely transparent by appropriately enough using the built in fb styling of transparent. After that the beauty of your own css will shine through.
For others, I will leave here an extreme example of what I often employ.

Step 1 - Add as many of these settings to your data-fb-tooltip options or as className in options.js as I do.

cleanTip: {
boxColor: "transparent",
contentBackgroundColor: "transparent",
boxRoundCorners: "none",
shadowType: "none",
showOuterClose: false,
showClose: false,
placement:"right",
attachToHost:false,
delay:0,
overlayOpacity: 75,
outerBorder: 0,
innerBorder: 0,
zoomBorder: 0
},

* If you a className like this in your data-fb-tooltip options remember that modified options will replace/override like - className:cleanTip placement:top

Step 2 - Apply your css to your hidden tooltip div

Here is an example of css and a tooltip div (this is from actual code I use so modify accordingly)

.site-tip{
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
line-height: 1.1rem;
color: rgba(255,255,255,1);
background-color: transparent;
margin-left: 10px;
min-height: 15px;
max-width: 400px;
position: relative;
padding-top: 2px;
padding-left: 2px;
padding-right: 6px;
padding-bottom: 6px;
display: none;
}
.site-tip-msg{
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(to bottom, rgba(245,246,246,0.2) 0%,rgba(219,220,226,0.6) 14%,rgba(184,186,198,0.98) 35%,rgba(184,186,198,1) 36%,rgba(184,186,198,1) 62%,rgba(184,186,198,0.98) 63%,rgba(219,221,226,0.6) 85%,rgba(221,223,227,0.57) 86%,rgba(245,246,246,0.15) 100%);
border: 5px ridge rgba(255, 255, 255, 1);
box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.7);
border-radius: 9px;
padding-top: 6px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 2px;
}
.site-tip-msg p{
font-size: .8rem;
color: rgba(255, 255, 255, 1);
}
.site-tip-msg h1{
font-size: 1.1rem;
color: rgb(255,255,255);
text-shadow: 1px 1px 1px rgba(0,0,0,.8);
text-align: center;
margin: 0px;
padding: 0px;
}


html


<div id="some-tip" class="site-tip">
<div class="site-tip-msg">
<h1>I Am the Title</h1>
<p>I am the text and can be as clear or ambiguous as necessary!</p>
</div>
</div>


The thing to note about this example is that the the outside div is meant to allow for outside shadows on the inner div so adjust the margins and paddings on both as needed.

Lastly, to help in adjusting the css and html just turn the floatbox transparency off to get your bearings - if you use a clasName then it's super easy; just add something to the className on your options string like x.

*This css example is relative to Firefox. For a good site that can generate transparent gradients for most browsers try - Colorzilla ([url=http://www.example.com] http://www.colorzilla.com/gradient-editor/[/url] )

**If this is out to lunch then please delete this post or let me know and I will.

Page: 1