codice:
<style>
a:before, a:after {
  bottom:0;
  display:none;
  position:absolute;
}

a:before {
  border-top:.6em solid #09f;
  border-top:.6em solid rgba(0,153,255,0.8);
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  content:"";
  left:20px;
  margin-bottom:1em;
}

a:after {
  background-color:#0099ff;
  background-color:rgba(0,153,255,0.8);
  border-radius:7px;
  color:#ffffff;
  content:attr(data-errorType) ": \A" attr(data-error);
  left:0;
  margin-bottom:1.5em;
  padding:5px 15px;
  white-space:pre-wrap;
}

a:hover:after,
a:hover:before {
  display:block;
}
</style>
</head>
<body>
  
<div>
  Questo link ha un tooltip usando<code>margin-bottom:1em</code>. 
E' solo visibile se ci passi sopra con il mouse
</div>
  
</body>
</html>
Qui sopra hai un esempio; ma, i tooltip fatti con il solo CSS non sono il massimo.
Meglio usare qualche libreria .js, tipo jQuery, mootools o simile.