Making a simple tooltip with only HTML and CSS

Question

I want my tooltip element (the ) to appear above everything on the page but still relative to its parent element (the

Answer 1

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>

Answer 2

I found a method to make a very lightweight tooltip with 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: (must be in this order)

.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;
}

Totally awesome and props to this guy!

Answer 3

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>

Answer 4

Try this its simple and compact, I made it myself

<link href="https://firebasestorage.googleapis.com/v0/b/tooltipcss.appspot.com/o/tooltip.css?alt=media&token=0ce443aa-0970-4167-8d7d-7abdcd2edf71" rel="stylesheet">
<span class="info">Text<span class="tooltip">MSG</span></span>

Answer 5

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>
</>