git'ifying a simple CSS tooltip

July 3rd 2013 - Code

Decided to make this a git project. Still work in progress although unlike previous examples this tooltip has an arrow and also allows for different position placements. You can check out the project here or the full demo here.

It uses HTML5 Data attribute to populate the CSS “content” property. So if you have mark up like this;

<div data-somecontent="this is my conten"> hi there. </div>

Then use a CSS selector

	div {
		content: attr(data-somecontent);
		display: block;

This adds the data into the div container. With some more CSS magic we can turn it into a tooltip like this:

Demo: http://cdpn.io/oCqIu