Pure CSS Tooltips

Here is a solution for flexible, near-bulletproof pure CSS tooltips. The code uses HTML5 data-* attributes along with attribute selectors and some CSS positioning.

Here is the HTML:

<p class="tt">Lorem ipsum dolor sit amet <a href="#" data-tooltip="This is a pure CSS tooltip">hover over this link</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, <a href="#" data-tooltip="This is a pure CSS tooltip">hover over this link which is longer than the other</a> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
a[data-tooltip]:link, a[data-tooltip]:visited {
  position: relative;
  text-decoration: none;
  border-bottom: solid 1px;
}

a[data-tooltip]:before {
  content: "";
  position: absolute;
  border-top: 1em solid #0090ff;
  border-left: 1.5em solid transparent;
  border-right: 1.5em solid transparent;
  display: none;
  top: -1em;
}

a[data-tooltip]:after {
  content: attr(data-tooltip);
  position: absolute;
  color: white;
  top: -2.5em;
  left: -1em;
  background: #0090ff;
  padding: .25em .75em;
  border-radius: .5em;
  white-space: nowrap;
  display: none;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
  display: inline;
}

Here is a live demo (use the range slider to adjust the font size, which confirms that the tooltip will resize automatically based on the font size):

Some important points to keep in mind:

  • CSS-only tool tips are usually not accessible to assistive technology devices like screen readers, so these should only be decorative and should not be used for vital page content.
  • The fluid size is based on the inherited font size (in the case of the demo, it comes from the <body> element)

Source

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to Snippets
Scroll to Top