Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    tooltip css help plz

    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:
    Code:
    <a class='tooltip' href="#">pppns <span>Per Person Per Night Sharing </span></a>
    css:
    Code:
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi bazz

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

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

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

    Code:
    a.tooltip{position:relative;left:0;}
    a.tooltip:link span{
        display:block;
        position:relative:
        left:0;top:0;width:350px;
    }
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.

    Code:
    <a class='tooltip' href="#"><span>pppns </span><span class="the_tip">Per Person Per Night Sharing </span></a>
    Code:
    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?
    Last edited by Rowsdower!; 10-30-2009 at 03:11 PM. Reason: grammar...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Good thinking...

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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:
    Code:
    <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.
    Code:
    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.
    Code:
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    Now just to test in IE
    Edit:
    DOH! needs some tweaking for IE6.


    Code:
    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;
    
    }
    Last edited by bazz; 10-30-2009 at 06:47 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bazz View Post
    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!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    There was a recent thread about hover on spans inside anchors in IE6 here, in similar circumstances which might help.

  • #14
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    heh heh. Thanks. I tried hasLayout but I must have used the wrong tag. I'll try it again.

    Thanks to your both

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #15
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    yes, I think I have it this time.

    Code:
    a.tooltip:hover{height:1%}
    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •