Making a simple tooltip with only HTML and CSS

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!

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>

Tags:

Javascript

Html

Css

Tooltip

Related