[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2004-11-01
5
Medium Priority
?
236 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
Comment
Question by:Bl248
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 17

Expert Comment

by:mreuring
ID: 12470736
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:
dakyd earned 1000 total points
ID: 12470786
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
ID: 12490084
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
ID: 12490890
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
ID: 12494123
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

656 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