December 14th 2015

Sitewide ToolTip System Built with only CSS

Recently, I built a simple, sitewide tooltip system in pure CSS. Here's the code. Use it for whatever you want.

This system works by adding a data-hover attribute to any element. The value of the data-hover is what will be in the tooltip.

Demo

All CSS Tooltip *

Sass

@import "compass";
$tooltip-bg:green;
$arrow-size:10px;
// hover state of anything with a data-hover attribute
*[data-hover] {
	&:hover {
		
		position:relative; // remove this if position is already set

		// tooltip text
		&:after {
			background:$tooltip-bg;
			color:rgba(255,255,255,1);
			content:attr(data-hover); // value of data-hover attribute
			display: block;
			font-size:.75em;
			left:50%;
			line-height: 1.25em;
			padding:.5em;
			position:absolute;
			bottom:$arrow-size;
			@include transform(translate(-50%, -1em));
			white-space: nowrap;
			max-width:250px;
		}

		// tooltip arrow
		&:before {
			width: 0; 
			height: 0; 
			border-left: $arrow-size solid transparent;
			border-right: $arrow-size solid transparent;
			border-top: $arrow-size solid $tooltip-bg;
			
			content:"";
			display: block;
			font-size:.75em;
			left:50%;
			position:absolute;
			bottom:0;
			@include transform(translate(-50%, -1em));
		}
	}
}

HTML

All CSS Tooltip *

CodePen

See the Pen CSS-only Tooltip by Drew Thomas (@drewbrolik) on CodePen.