A Portfolio and blog for Mustafa Kurtuldu


git'ifying a simple CSS tooltip

I decided to make this a git project. Still a work in progress, although, unlike previous examples, this tooltip has an arrow and 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