Идея очень простая, но эффективная. Вот маркап:

<a href=’#'>Заголовок ссылки <span>Подсказка</span></a>

Итак мы хотим, чтобы посетитель видел только заголовок ссылки, а подсказку видел при наведении мышкой.

  a {
	z-index:10;
  }
  a:hover {
	position:relative;
	z-index:100;
  }
  a span {
	display:none;
  }
  a:hover span {
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
  }

Span мы спрячем, и покажем только когда мышка будет над ссылкой. Тогда сработает цсс селектор a:hover span. Также мы позиционируем a:hover релативно, а a:hover span абсолютно.

Источник.