CODEWITHSUNDEEP
htmlcsshtml-table
d-_-b
d-_-b

Reputation: 6773

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 FireFox3. When I'm feeling particularly macho, I'll test it in IE.

Upvotes: 4

Views: 7140

Answers (3)

d-_-b
d-_-b

Reputation: 6773

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>

Upvotes: 0

Makram Saleh
Makram Saleh

Reputation: 8701

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.

Upvotes: 0

Kevin
Kevin

Reputation: 3851

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';

Upvotes: 1

Related Questions