Jump to content

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


khanahk

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

 

Link to comment
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
Link to comment
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...