Will Pracht

Pure CSS Tooltips

Sunday, February 21st, 2010

Tooltips: The most complicated, fascinating subject of all time. Ok, not really.

Recently, I had a client ask me to put together some tooltips for a project they were working on. As you probably know, there are many ways to go about it, but I wanted to try my hand at it, using only CSS. These have all been tested in FF3, IE8, and Webkit.

Here are some examples I’ve created along with a bit of explanation:

I did it for the lulz

.magic{
display: block;
float: left;
height: 220px;
margin: auto;
padding: 20px;
position: relative;
text-align: center;
text-decoration: none;
width: 220px;
}

.magic:hover{ background: #445878; }

.magic img{ border: 0; } /* Kill the image border from the anchor wrapper. */

.magic span{
background: #9bcc52;
color: #eeeff7;
display: none;
font-size: 1.4em;
height: 100px;
line-height: 100px;
position: absolute;
top:    0;
left: -200px;
width: 200px;
}

.magic:hover span{
display: block;
}

<a class="magic" href="#">
  <img src="http://backpack.willpracht.net/files/awesome_med.png" />
  <span>I did it for the lulz</span>
</a>

Hovering over the “Awesome Face” produces an absolutely positioned span to the left. Because the span is absolutely positioned, you can achieve all sorts of effects.

I did it for the lulz

.magic:hover span{
	background: #445878;
	color: #eeeff7;
	display: block;
	font-weight: bold;
	height: 50px;
	line-height: 50px;
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 0;
	width: 190px;

	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

<a class="magic" href="#">
  <img src="http://backpack.willpracht.net/files/awesome_med.png" />
  <span>I did it for the lulz</span>
</a>

With this example, I’ve basically turned the span into a caption that displays on hover. I’ve used opacity effects as well for added beauty. The only thing that changes in the CSS are the .magic:hover span{} attributes, as shown to the left.

I did it for the lulz

.magic:hover span{
	background: #445878;
	color: #eeeff7;
	display: block;
	font-size: 1.4em;
	font-weight: bold;
	height: 240px;
	line-height: 240px;
	position: absolute;
	left: 0;
	text-align: center;
	top: 0;
	width: 190px;

}

<a class="magic" href="#">
  <img src="http://backpack.willpracht.net/files/awesome_med.png" />
  <span>I did it for the lulz</span>
</a>

With this final example, I’ve covered the entire image with a tooltip. Again, the only thing that changes in the CSS are the .magic:hover span{} attributes.

I hope this was somewhat informative to you. As I said before, this has been done many times, I figured I would give my take on them anyway.