Tooltip nur mittels CSS3 erstellen

Idee über t3n bekommen. http://t3n.de/news/css3-individuelle-tooltips-ohne-356353/

by Jens Grochtdreis

HTML

<p>
    Hier kommt ein <a href="#" data-tooltip="Hier steht dann total wichtiges Zeug!">Link mit einem Tooltip</a>, damit man noch tolle Zusatzinformationen bekommen kann. 
</p>

<p>
    Man kann solche Tooltips auch an anderen Elementen erzeugen, <span data-tooltip="Hier steht dann total wichtiges Zeug!">beispielsweise an SPAN-Elementen</span>.
</p>

CSS

a, span {position: relative;}

a[data-tooltip]:before,
span[data-tooltip]:before  {
  position: absolute;
  left: 0;
  top: -40px;
  background-color: #ff0000;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  padding: 0 15px;
  content: attr(data-tooltip);
  white-space: nowrap;
  display: none;
}

a[data-tooltip]:after,
span[data-tooltip]:after {
  position: absolute;
  left: 15px;
  top: -10px;
  border-top: 7px solid #ff0000;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  display: none;
}

a[data-tooltip]:hover:after, a[data-tooltip]:hover:before,
span[data-tooltip]:hover:after, span[data-tooltip]:hover:before {
  display: block;
}

body {padding: 40px;}
p {margin-bottom: 20px;}