Pure CSS tooltips

This is not so much of a new trick but it’s still pretty interesting, at least I thought so. Thanks to pseudo elements it’s possible to create simple hover tooltips using only CSS and a single data attribute on any pretty much element.

<ul>
	<li><a href="" data-tooltip="Code">[x]</a></li>
	<li><a href="" data-tooltip="Issues">[x]</a></li>
	<li><a href="" data-tooltip="Pull Requests">[x]</a></li>
	<li><a href="" data-tooltip="Wiki">[x]</a></li>
	<li><a href="" data-tooltip="Pulse">[x]</a></li>
	<li><a href="" data-tooltip="Graphs">[x]</a></li>
	<li><a href="" data-tooltip="Network">[x]</a></li>
</ul>

We could actually use the title attribute for most elements if we felt like it.

Lets and the style that makes this all work but first a warning; unlike the JavaScript tooltips some of these styles may impact the page layout, it is pretty unlikely but don’t say you weren’t told.

First we need to target all of the elements on the page and give them relative positioning so that we can position the pseudo elements properly.

*[data-tooltip] {
    position: relative;
}

To create the main toolltip block we make use of ::after to effectively create a new element in the DOM

*[data-tooltip]::after {
    /* Keep it hidden until mouseover */
    display: none;
    position: absolute;
    /* Puts the text from the data- attribute inside the element as a text node */
    content: attr(data-tooltip);
    padding: 0px 8px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    color: #fff;
    font-size: 10px;
    line-height: 24px;
    /* Needed to stop the tooltip trying to be as narrow as possible */
    white-space: nowrap;
    letter-spacing: 0.1em;
    text-rendering: optimizeLegibility;
}

Getting it to show up when the mouse hovers over the elements is pretty easy thanks to :hover

*[data-tooltip]:hover::after {
    display: block;
}

Getting the block positioned nicely to the right of the element is pretty straight forward to, but lets thing ahead to the situation where we want it on the left and add a new data- attribute to control the direction.

<ul>
	<li><a href="" data-tooltip="Code" data-tooltip-direction="right">[x]</a></li>
	<li><a href="" data-tooltip="Issues" data-tooltip-direction="right">[x]</a></li>
	<li><a href="" data-tooltip="Pull Requests" data-tooltip-direction="right">[x]</a></li>
	<li><a href="" data-tooltip="Wiki" data-tooltip-direction="right">[x]</a></li>
	<li><a href="" data-tooltip="Pulse" data-tooltip-direction="right">[x]</a></li>
	<li><a href="" data-tooltip="Graphs" data-tooltip-direction="right">[x]</a></li>
	<li><a href="" data-tooltip="Network" data-tooltip-direction="right">[x]</a></li>
</ul>

*[data-tooltip-direction="right"]::after {
    top: 50%;
    left: calc(100% + 10px);
    margin-top: -12px;
}

This will position the block in line with the middle of the element and 10px to the right of it. The -12px is just half of the element height which is set by line-height above.

The little tab is a bit more tricky to get in the right place but first we need to add a new element to create it

*[data-tooltip]::before {
    display: none;
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
}

It’s 0px in size because we’re going to make the arrow shape using the border attribute. Rather awkwardly the majority of the CSS for this element needs to be different for each direction, here’s right

*[data-tooltip-direction="right"]::before {
    top: 50%;
    margin-top: -5px;
    left: calc(100% + 5px);
    border: 5px solid transparent;
    border-right: solid 5px rgba(0, 0, 0, 0.8);
    border-left: none;
}

This creates a 5px triangle that is 5px to the right of the element (or just to the left of the tooltip block) with the same background colour as the block.

The result turned out pretty tidy looking

See the Pen Pure CSS Tooltips by Jacek (@betterphp) on CodePen.