tags:

views:

210

answers:

3
Q: 

div popup inside td

I have a table with a bunch of cells. (No way! Amazing! :P) Some of the cells have a small div that when you put your mouse over, it gets bigger so you can read all the text. This works well and all. However, since html elements that come later in the document have a higher z-index, when the div gets bigger it is underneath the other divs in the other cells.

Some html code:

<table>
<tr>
  <td>
    limited info
    <div style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
        informative long text is here
      </div>
    </div>
  </td>
  <td>
    some short info
    <div style="position: relative;">
      <div style="position: absolute; top: 0; left: 0; width: 1em; height: 1em;" onmouseover="tooltipshow(this)" onmouseout="tooltiphide(this)">
        longer explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
  </td>
</tr>
</table>

Some js code:

function tooltipshow(obj)
{
    obj.style.width = '30em';
    obj.style.zIndex = '100';
}

function tooltiphide(obj)
{
    obj.style.width = '1em';
    obj.style.zIndex = '20';
}

It doesn't matter if I set z-index dynamically to something higher onmouseover. It's like z-index has no affect. I think it has something to do with the table.

I've tested this in FF3. When I'm feeling particularly macho, I'll test it in IE.

+1  A: 

Have you tried a CSS-based solution?

HTML:

<table>
<tr>
  <td>
    limited info
    <div class="details">
      <div>
        informative long text is here
      </div>
    </div>
  </td>
  <td>
    some short info
    <div class="details">
      <div>
        longer explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
  </td>
</tr>
</table>

CSS:

.details {
    position: relative;
}
.details div {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
}
.details div:hover {
    width: 30em;
    z-index: 100;
}

If Javascript is necessary, you can change the .details div:hover { line to .show-details { and apply the class to the element using element.className = 'show-details';

Kevin  2010-05-12 07:50:13
+1 Thanks for the CSS hover tip. It looks like the problem I was having was related to z-index and opacity. z-index is a odd, but I may not understand it fully. However, the opacity problem is just strange. I think that is a bug in FF. Oh well, now to wrestle with IE... Yuck.
sims  2010-05-13 00:52:05
You ought to try tinkering with z-index at 100% opacity to get a feel for z-index before making things translucent.
Kevin  2010-05-13 03:27:39
Yeah, but even at 0.99 I still get the problem. So it's not my eyes. With either z-index or opacity set to anything other than 1, it is covered. In this case I cannot use opacity at all because if this "bug". At least I think it is a bug. Removing the z-index AND the opacity works. If either are there, I get the bug.
sims  2010-05-13 07:53:05
A: 

Use the same HTML/CSS from @Kevin answer, but change the z-index of the relative div .details as well. This will work better on IE.

Makram Saleh  2010-05-12 08:09:43
A: 

It turns out that setting z-index and opacity were messing things up. Check this out:

<html>
<head>
<style>
td {
    background-color: #aaf;
    padding: 1em;
}

.relative {
    position: relative;
    width: 100%;
}

div.highlight {
    position: absolute;
    background-color: green;
    bottom: -1em;
    left: 0;
    width: 100%;
    height: 0.2em;
    /* the offenders */
    z-index: 10;
    opacity: 0.8;
}

div.tag {
    background-color: red;
    position: absolute;
    top: -5em;
    left: 0;
    width: 1em;
    height: 1.5em;
    overflow: hidden;
    z-index: 20;
    font-size: 0.6em;
    text-align: left;
    border: solid 0.1em #000;
    padding-left: 0.3em;
}

div.tag:hover {
    width: 30em;
    z-index: 100;
}
</style>
</head>
<body>
<table>
<tr>
  <td>
    limited info
    <div class="relative">
    <div class="highlight">
      <div class="tag">
        informative long text is here
      </div>
    </div>
    </div>
  </td>
  <td>
    some short info
    <div class="relative">
    <div class="highlight">
      <div class="tag">
        aaaaaaaaaalolkjlkjnger explanation about what is really going on that covers the div up there ^^^. darn!
      </div>
    </div>
    </div>
  </td>
</tr>
</table>
</body>
</html>
sims  2010-05-13 00:50:00

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?