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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2006
    Location
    Illinois
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Tooltip Getting Cut Off in Browser Window

    Hi,
    I'm coding pure CSS tooltips using an XSL transformation. Each definition is stored in a hidden span when the page loads and displayed when you mouseover specific words. The problem I'm having is that long tooltips are getting cut off at the bottom of the browser window.

    Does anyone know how to fix this? I'd like the tooltip to "float" up above the bottom of the browser window. I'm trying to avoid using JavaScript, but I am open to using JavaScript within the CSS if necessary. Thanks!

    HTML:
    Code:
    <a href="#" class="tooltip">accident<span>A sudden unexpected event, identifiable in time and place. In some policies, accident means the same as occurrence.</span></a>
    CSS:
    Code:
    a.tooltip,  a.tooltip:visited {z-index:24;color:#336666;position:relative;border-bottom:1px dashed #336666;text-decoration:none;}
    a.tooltip:link, a.tooltip:hover, a.tooltip:active {z-index:25;color:#336666;border-bottom:1px dashed #336666;text-decoration:none;cursor:help;}
    a.tooltip span {display:none;}
    a.tooltip:hover span {position:absolute;top:2em;left:0em;border:1px solid #F0D070;padding:3px;display:block;width:245px;color:#D0A010; background-color:#FFFFE4;font-weight:normal;}
    Sarah

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I don't think you can do that with pure CSS, Javascript is probably necessary.

    If you don't want to have external JS, you may be able to put JS within your CSS to do that sort of thing, look here for information on how to do that.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Probey20,
    It's working fine when you place Accidents up higher. The span is appearing exactly where you've told it to. To move it around, play with the settings I've highlighted in red below:
    Code:
    a.tooltip:hover span {position:absolute;top:2em;left:0em;border:1px solid #F0D070;padding:3px;display:block;width:245px;color:#D0A010; background-color:#FFFFE4;font-weight:normal;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Aug 2006
    Location
    Illinois
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Excavator,
    Our pages are dynamically generated through a content management program, so we never know where the tooltips are going to appear on a page. We want them to display below each word, unless we hit the bottom of the browser window, in which case we want them to bump up so they are fully visible. Is this possible?

    Thanks!
    Sarah

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I don't think span can do it because you are absolutely positioning where the span is placed. Have you messed around with that at all, just to see what it does?

    Have a look at this and see if it won't work for you: http://www.nopeople.com/CSS/tooltip/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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