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>Code language: HTML, XML (xml)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;
}
Code language: CSS (css)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)
