Making a simple tooltip with only HTML and CSS

Question

I want my tooltip element (the <span>) to appear above everything on the page but still relative to its parent element (the <td>). I'm trying with JS but would like a no-script solution.

JS to show/hide the <span>:

window.AETid = "AE";

        function tooltip(tid) {
         document.getElementById(tid).style.display="block";
        }

        function hideTooltip(tid) {
         document.getElementById(tid).style.display="none";
        }

HTML:

<td class="ht" onmouseover="tooltip(window.AETid);" onmouseout="hideTooltip(window.AETid);">
Send reminders?
<span class="tooltip" id="AE">If this option is selected, e-mail reminders will be sent to the client before each appointment.</span>
</td>

CSS for .tooltip:

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

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

Using position: fixed instead of absolute on the tooltip <span> kept the element from interrupting the DOM, but literally positioned it after everything else on the page (at the bottom)

All help is greatly appreciated

Position needs to be `absolute` or `fixed`. The position right now is relative, which will effect the position of other `relative` or `static` positioned elements — Joe Komputer, May 15 '14 at 21:06
I tried it using `relative` on the parent and `absolute` on the tooltip `` (and edited the question to clarify). The tooltip is still interrupting the DOM flow. Using `fixed` made it positioned after everything else on the page — khaverim, May 15 '14 at 21:13

score 25 · Accepted Answer · edited Sep 15 '21 at 17:51

25

I found a method to make a very lightweight tooltip with no JS!

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

.tooltip {
  display: none;
    color: red;
    margin-left: 28px; /* moves the tooltip to the right */
    margin-top: 15px; /* moves it down */
    position: absolute;
    z-index: 1000;
}

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

Totally awesome and props to this guy!

edited Sep 15 '21 at 17:51

undefined

6,208
3
49
59

answered May 15 '14 at 21:43

khaverim

3,386
5
36
46

6

Usually not a fan of people co-opting other people's answers, even if you do give props, but in reducing that user's code down to its very basics, you've made this more valuable. Good job. – Engineer Oct 17 '19 at 11:05

score 12 · Answer 2 · answered May 04 '20 at 20:38

12

just use abbr tag ?

<p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p title="Free Web tutorials">W3Schools.com</p>

answered May 04 '20 at 20:38

dota2pro

7,220
7
44
79

2

I love the simplicity and that it does the job. Just used it. Thanks! – NDi Dec 09 '20 at 03:44
1

@dota2pro I absolutely appreciate this answer. thank you! – Bryan_C Aug 12 '21 at 04:04

score 6 · Answer 3 · edited May 04 '20 at 20:23

6

Just curious what is wrong with the title attribute of the td???

<td title="If this option is selected, e-mail reminders will be sent to the client before each appointment.">
  Send reminders?
</td>

edited May 04 '20 at 20:23

dota2pro

7,220
7
44
79

answered Apr 27 '18 at 16:19

Popmedic

1,791
1
16
21

"Just curious what is wrong with the title attribute of the td?" There is a delay before it shows – Jonah Sep 10 '22 at 02:09

score 1 · Answer 4 · edited Sep 14 '21 at 03:08

1

Try this its simple and compact, I made it myself

.info:hover .tooltip {
  color: red;
  visibility: visible;
  opacity: 1;
  transition: opacity 1s
}
.tooltip {
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s
}
}
.tooltip:hover {
  visibility: visible
}

.info {
cursor: help
}

<span class="info">Text<span class="tooltip">MSG</span></span>

edited Sep 14 '21 at 03:08

General Grievance

4,555
31
31
45

answered Aug 06 '20 at 15:28

Boss GamerYT

9
5

score 1 · Answer 5 · answered Dec 23 '20 at 20:20

Solution for tooltip ON TOP (always even if no space available)

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

.ht{
  position: relative;
}
.tooltip {
    display: none;
    color: red;
    z-index: 1;
  position: absolute;
  top: -50%;
  transform: translatey(-50%);
}

<br><br><br><br>
<br>
<br>

<div class="ht">Send reminders? <br/> xaxaxa <br/> xaxaxa <br/> xaxaxa
<span class="tooltip">this is the tooltip alshdgwh gahfguo 
wfhg fghwoug wugw hgrwuog hwaur guoarwhg <br/> sdfaasdfrwu<br/> sdfaasdfrwu<br/> sdfaasdfrwu</span>
</>

Making a simple tooltip with only HTML and CSS

5 Answers5

Linked