Making A Tooltip With Js/css: How To Get Element To Appear "floating Above" Everything Else

[khanahk]

I want my tooltip element (the <span>) to appear above everything on the page but still relative to its parent element (the <td>).

 

JS to show/hide the <span>:

window.AETid = "AE";
        
        function tooltip(tid) {
         console.log('run the tooltip...id: '+tid);
         document.getElementById(tid).style.display="block";
        }
        
        function hideTooltip(tid) {
         document.getElementById(tid).style.display="none";
        }

HTML:

<td onmouseover="tooltip(window.AETid);" onmouseout="hideTooltip(window.AETid);">
Send reminders?
<span class="tooltip" id="AE">this is the tooltip</span>
</td>

CSS for .tooltip:

.tooltip {
    color: #ff0000;
    display: none;
    z-index: 100;
    position: relative;
    right:0px;
    bottom: 0px;
}

Currently, the tooltip appears as expected when I hover over the <td>, but it appears within the <td> element, thus changing the size of the <td> and thus the <tr> and thus the <table>. I want the tooltip to appear, well, like tooltips to: above and not effecting the rest of the page. z-index doesn't seem to do it alone in my case...

 

All help is greatly appreciated

 

[falkencreative]

I'm not sure if I totally understand what you want... but have you tried adding position:relative to the table cell you want the tooltip to appear in, and then position:absolute to the tooltip itself? That will separate the tooltip from the document flow, but position it based on the parent element.

[khanahk]

Hi Ben. Good to see you're still around and helping folks. It's very appreciated.

 

I just tried your suggestion and got the same result. I attached 2 images to clarify. First before hovering, then after hovering.

 

 

The tooltip appears, but it is within the <td> element and makes the table bigger. I want it to appear above the table and not change the DOM flow at all, but still be relative to it's parent. You know, like all tooltips do normally. Like when you hover over an <a> with a title="here's a tooltip" attribute.

 

Edit: changed the second image to make it more obvious

Edited May 15, 2014 by khanahk

[khanahk]

I just found a method that needs no JS!

 

HTML:

<td class="ht">Send reminders?
<span class="tooltip">this is the tooltip alshdgwh gahfguo wfhg
fghwoug wugw hgrwuog hwaur guoarwhg rwu</span>
</td>

CSS (in THIS order to hide the tooltip originally):

.ht:hover .tooltip {
    display:block;
}

.tooltip {
    display: none;
    background: #C8C8C8;
    border: 1px solid #000;
    border-radius: 4px;
    margin-left: 28px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
}

Incredibly lightweight and workable!