...

View Full Version : tooltip css help plz



bazz
10-29-2009, 03:04 PM
Hi,

I have the following snippet of code which works fine for the screen output. (css below too). However, for printing out the page, I want the 'prpn' to be invisible and the explanation to display instead. I have tried oodles of ways but without success.

code:


<a class='tooltip' href="#">pppns <span>Per Person Per Night Sharing </span></a>


css:


a.tooltip{
position:relative;
z-index:24; background-color:transaprent;
color:#fff;
text-decoration:underline;}

a.tooltip:hover{z-index:25; background-color:transparent;}

a.tooltip:link span{
display:block;
position:absolute;
top:2em; left:2em; width:18em;
width:18em;
color:#fff;
font-size:0.8em;
text-align: center;
text-decoration: none;
}



Would someone give me a nudge or a pointer.

bazz

SB65
10-29-2009, 04:12 PM
Hi bazz

I haven't done a lot with print stylesheets, but this seems to work OK in FF3/IE7 at least:


a.tooltip{position:absolute;left:-9999px}
a.tooltip:link span{position:absolute;left:9999px;top:0;width:200px}

bazz
10-29-2009, 09:40 PM
Thanks for the tip.

that code printed what I want in the horizontally correct place - but, at the top of the page and not withing the correct table.

working on it some more and this below works except that if I make the tooltip print in #000; it is on the page. I'll leave it like this unless I can find a way to make the tooltip invisible without also, making the span invisible.

I have tried the tooltip -999px and made the span everything from left:200px to left:1400px but it didn't show up.

bazz



a.tooltip{position:relative;left:0;}
a.tooltip:link span{
display:block;
position:relative:
left:0;top:0;width:350px;
}

SB65
10-30-2009, 10:57 AM
that code printed what I want in the horizontally correct place - but, at the top of the page and not withing the correct table.

If you add position:relative to the element containing the a.tooltip that should correct the absolute positioning. If this is a table cell then you'll probably need to insert a div into the td element and apply position:relative to the div, as position:relative doesn't work well with tables.

bazz
10-30-2009, 01:58 PM
Thanks.

The whole output shows exactly where it ought to. what I am trying to achieve on top of that is:-

instead of making the a.tooltip output on the page as #fff; (white), I am trying to make it position off screen somewhere but for the ~ a.tooltip: link span ~ to remian where it is on the page. Basically, if I make a.tooltip print in white, there is an odd blank in may page.

bazz

Rowsdower!
10-30-2009, 02:40 PM
This is a creative discussion, and I like that. I wonder, however, if it might be simpler to enclose each portion into its own span and give the tooltip part a class. Then you use display:none on a.tooltip span to hide the base text and display:inline on a.tooltip span.[whatever] to show the tooltip.

It's extra markup, but it's still semantic and it should be easier than fighting with positioning.


<a class='tooltip' href="#"><span>pppns </span><span class="the_tip">Per Person Per Night Sharing </span></a>


a.tooltip {
/* position:relative;*/ /*For the print-only CSS you wouldn't even need this part...*/
/* z-index:24;*/
background-color:transaprent;
/* color:#fff;*/
text-decoration:underline;}

/*a.tooltip:hover {z-index:25; background-color:transparent;}*/ /*...or this part*/

a.tooltip span {display:none;}

a.tooltip span.the_tip {
display:inline;
/* position:absolute;*/
top:2em; left:2em; width:18em;
width:18em;
/* color:#fff;*/
font-size:0.8em;
text-align: center;
text-decoration: none;
}


...so really in the end your print css for this part would be this:

a.tooltip {
background-color:transaprent;
text-decoration:underline;}

a.tooltip span {display:none;} /*hides the entire link contents within all <span> elements*/

a.tooltip span.the_tip { /*re-displays the <span> elements with class of "the_tip"*/
display:inline;
top:2em; left:2em; width:18em;
width:18em;
font-size:0.8em;
text-align: center;
text-decoration: none;
}

Thoughts?

SB65
10-30-2009, 03:09 PM
Good thinking...:thumbsup:

bazz
10-30-2009, 06:55 PM
Thank you. that has helped greatly.

Just one remaining issue. when I rollover the span ~ to see the span.the_tip ~ the 'flyout' distorts the rest of the page. my previous css didn't cause this to happen so I know there is a way to make it right.

still trying myself but, here is the default and print css as well as the html.

btw: it doesn't have to be an href. I just had it that way to 'make sure' it would work in IE6. I am open to suggestions for other ways to do it.

html:


<td class='left_side' rowspan='2'><p>2 Over 18 yrs for 6 nights @ 47.00 GBP <a class='tooltip' href="#"><span>pppns </span><span class='the_tip'>Per Person Per Night Sharing </span></a></p></td>


print css.


a.tooltip { position:relative;
background-color:transparent;
text-decoration:none;
z-index:24;
color:#000;
}
a.tooltip span {display:none;
}
a.tooltip span.the_tip {
position:absolute;
display:block;
top:0em; left:-18em; width:18em;
width:18em;
font-size:0.8em;
text-align: center;
text-decoration: none;
}


output css.


a.tooltip { position:relative;
background-color:transparent;
text-decoration:underline;
z-index:24;
color:#000;
}

a.tooltip span {
position:relative;
text-decoration:underline;
}

a.tooltip span.the_tip {
display:none;
}

a.tooltip:hover span.the_tip {
display:block;
z-index:26;
position:relative;
top:0em; left:10em;
background-color:#a0a37f; color:#fff;
text-align: center;
text-decoration: none;
}


I think it must have to do with z-index but, I am struggling to work it out.

bazz

bazz
10-30-2009, 07:07 PM
GOT IT :) erm, no I ain't!

changed the position:relative to position:absolute, in "a.tooltip:hover span.the_tip". That took it out of the flow, which I had thought z-index might have done.

Thanks guys :thumbsup:
Now just to test in IE :(

DOH! needs some tweaking for IE6.




a.tooltip {
position:relative;
background-color:transparent;
text-decoration:underline;
z-index:24;
color:#000;
}
a.tooltip:hover{z-indez:25;}
a.tooltip span {
position:relative;
text-decoration:underline;
z-index:24;
}
a.tooltip:hover span{
z-index:24;
}
a.tooltip span.the_tip {
display:none;
}
a.tooltip:hover span.the_tip {
display:block;
position:absolute;
top:0em; left:4em; width:18em;
background-color:#a0a37f; color:#fff;
text-align: center;
text-decoration: none;

}

Rowsdower!
10-30-2009, 07:52 PM
Just a general thought to repeat, but for print CSS the hover shouldn't be a factor at all.

Are you still working on the screen CSS as well, or is this just a print CSS file that you are making?

bazz
10-30-2009, 08:00 PM
Thanks Rowsdower!

I am now working on the screen css again, because I changed the html as per the earlier post. print css is now working perfectly in IE6 and FF3.5.3 The screen css works in FF but not in IE6, perhaps due to the hover element having to be connected to the <a href...> so I shall ponder enclosing the aref inside the span or perhaps using a snippet of js.

Would you perhaps, have another suggestion or solution for the way it is now?

bazz

Rowsdower!
10-30-2009, 08:40 PM
Thanks Rowsdower!

I am now working on the screen css again, because I changed the html as per the earlier post. print css is now working perfectly in IE6 and FF3.5.3 The screen css works in FF but not in IE6, perhaps due to the hover element having to be connected to the <a href...> so I shall ponder enclosing the aref inside the span or perhaps using a snippet of js.

Would you perhaps, have another suggestion or solution for the way it is now?

bazz

Oh, OK. I was just afraid that you were stressing out over print CSS not hovering properly.

From what I know of the CSS tooltip it's not completely IE6-friendly. You can get it pretty close but I don't think it will ever work 100% in IE6 unless there is some conditional comment with some sort of javascript hack specific to IE6 that would emulate the effect. Other than that, I have no relevant ideas to solve the problem.

Sorry! :D

SB65
10-30-2009, 08:45 PM
There was a recent thread about hover on spans inside anchors in IE6 here (http://codingforums.com/showthread.php?t=178960), in similar circumstances which might help.

bazz
10-30-2009, 08:51 PM
heh heh. Thanks. I tried hasLayout but I must have used the wrong tag. I'll try it again.

Thanks to your both :thumbsup:

bazz

bazz
10-30-2009, 09:36 PM
yes, I think I have it this time.



a.tooltip:hover{height:1%}


bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum