Jump to content
Killersites Community
khanahk

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

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

post-44297-0-47690700-1400187882_thumb.png

post-44297-0-29981000-1400188084_thumb.png

Edited by khanahk

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×