Solved

CSS Tooltip has a problem when it's next to a select field

Posted on 2004-11-01
233 Views
Last Modified: 2006-11-17
I like the effect of the CSS based tooltip but it has a couple of issues and I was hoping there is a working solution.

1) In IE 6: When the css text box appears next to a select box. The select field appears in front of the help text field. It does not do this in Firefox.

2) In Firefox: The colored text box is a fixed one line of width set. It does not expand to fit the text. In IE, I can add a br tag and it will insert a new line or push the box out wider. In Firefox the text continues outside the box border.

The following is the CSS and an example of how I am using it.

<td class="plg_text1" nowrap>Field label:<a class="info" style="padding-left:10px;" href="#">?<span>This is the field help that appears when you hover over the question mark</span></a></td>

a.info{
    position:relative; /*this is the key*/
    z-index:24;
    color:#000;
    text-decoration:none
}

a.info:hover  {
    z-index:25;
    padding-top:5px;
    padding-bottom:5px;
    text-decoration:none
}

a.info span{display: none}

a.info:hover span { /*the span will display just on :hover state*/
    font-family:Verdana, Tahoma, Arial;
    font-style:normal;
    font-size: 7pt;
    display:block;
    position:absolute;
    top:3em; left:-15em; width:20em;
    border:1px solid #5D96B9;
    background-color:#FFFFA0; color:#555;
    padding:2px;
    text-align: left
}

Thanks,
Blaine
0
Question by:Bl248
    5 Comments
     
    LVL 17

    Expert Comment

    by:mreuring
    Well, hate to break it to you, but you cannot solve the IE problem with a pure css-solution. IE being driven by a dinosaur-age engine has a troublesome rendering-bug that puts any select-box (and a few other form-elements) at z-index infinity. The usual fixes are, 1. Hiding all possibly interfering form-elements when hover-popups apear or 2. Scripting an iframe to fit underneath the popup, this will somehow overrule the z-index infinity of the form-elements involved.
    I haven't had a look at the FireFox issue yet, will have to come to you on that.

      Martin
    0
     
    LVL 19

    Accepted Solution

    by:
    Will something like this work for your firefox issue?  The idea is to make the table the container so that when you absolutely position the span, it'll be positioned relative to the table instead of relative to the page.  I've got a margin-left on the body so you can actually see the span, but odds are you won't need it.  Hope it helps.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <style type="text/css">
    a.info {
        z-index:24;
        color:#000;
        text-decoration:none
    }

    a.info:hover  {
        z-index:25;
        padding-top:5px;
        padding-bottom:5px;
        text-decoration:none;
    }

    a.info span {display: none}

    a.info:hover span { /*the span will display just on :hover state*/
        font-family:Verdana, Tahoma, Arial;
        font-style:normal;
        font-size: 7pt;
        display: block;
        position:absolute;
        top:3em; left:-10em;
        border:1px solid #5D96B9;
        background-color:#FFFFA0; color:#555;
        padding: 2px;
        text-align: left;
    }

    table {
        display: block;
        width: 400px;
        position: relative;
    }

    body {
        margin-left: 100px;
    }
    </style>
    </head>

    <body>
    <table>
    <tr>
    <td class="plg_text1" nowrap>Field label:<a class="info" style="padding-left:10px;" href="#">?<span>This is the field help that appears when you hover over the question mark</span></a></td>
    </tr>
    </table>
    </body>
    </html>
    0
     

    Author Comment

    by:Bl248
    Hi dakyd,

    I am using this feature in a table but adding that table CSS breaks my site layout, The table for some reason does not want to expand out to 100% width. This is part of a more complex form that has several tables and I would need to break it out to see whats causing this.

    It does not sound like there is a nice solution to this and I may have to go about it differenty but I did like the CSS based popup help.
    0
     
    LVL 19

    Expert Comment

    by:dakyd
    Not sure if it'll help, but you can try assigning an ID to the table and then changing the CSS so it only applies to that specific table.  So, change this:
        table {
            display: block;
            width: 400px;
            position: relative;
        }
    to this:
        #theTbl {
            display: block;
            width: 400px;
            position: relative;
        }

    and then add an id to this particular table:
        <table id="theTbl">

    Without seeing the rest of your layout, that's just a stab in the dark, there are tons of different ways that the tables and the CSS/styling could interact.  And if that doesn't work, it'll be a real chore to wade through all those tables to figure out what goes where.  And while we're talking about tables and their layouts ...

    >> This is part of a more complex form that has several tables and I would need to break it out to see whats causing this.

    I'm sure you've heard it before from others on this site, but this is part of the reason why tables aren't such a good idea for layouts.  Maintenance is a real nightmare, as you have seen.  Tables are rigid structures, and it takes a lot of acrobatics to make them position objects, so much so that it's fairly easy to make the entire structure fall apart.  CSS-based layout schemes tend to be much more flexible, and in many ways, they're also much more powerful.  For an example of what I mean, check out http://www.csszengarden.com/ - every single one of those samples has the same HTML, it's just the CSS that's different.  It might take a bit of work at first, but the end result is worth it.  Anyhow, now that I'm off of my soapbox, hope that helps in some way.
    0
     

    Author Comment

    by:Bl248
    Hi Dakyd,

    I was actually able to use some of your suggestion to position the help window area to a fixed area that does not effect or interact with other table or form elements. This is acceptable for me now.

    I appreciate your help.

    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

    913 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now