CSS3 tooltip

Tooltips are often used on websites to help the user on how to do something or by simply defining words. Some frameworks are used to help create these tooltips, but it requires JavaScript and CSS files.

In this example, only CSS is required to display a simple tooltip.

Demo

I saw a GallinipperA large mosquito or other insect capable of inflicting a painful bite. yesterday, so I ran away.

Here's the HTML:

<span class="tooltip">Gallinipper<span>A large mosquito or other insect capable of inflicting a painful bite.</span></span>

CSS code:

.tooltip {
  position: relative;
  text-shadow: 2px 2px 2px #888;
  cursor: help;
  display: inline;
  text-decoration: none;
  outline: none;
}
.tooltip span {
  font: normal 14px verdana;
  color: white;
  visibility: hidden;
  position: absolute;
  bottom: 30px;
  left: 50%;
  z-index: 20000;
  width: 250px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #422A20;
  background: -moz-linear-gradient(top, #B4784C 0%, #422A20 100%);
  background: -webkit-gradient(linear, center top, center bottom, from(#B4784C), to(#422A20));
  background: -o-gradient(top, #B4784C, #422A20); border-bottom: solid 1px #422A20;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: 0 0 5px 5px #B1A59D;
  -webkit-box-shadow: 0 0 5px 5px #B1A59D;
  box-shadow: 0 0 5px 5px #B1A59D;
}
.tooltip:hover span {
  visibility: visible;
}