Создание всплывающей подсказки с помощь css

<div class="tooltip">
<a href="#">текст ссылки<span>пояснение к ссылке</span></a>
</div>

.tooltip {
  margin: 50px;
}

.tooltip a {
  text-decoration:none;
  color:#333;
}

.tooltip a:hover {
  position:relative; /* Установка позиции для отступов */
}

.tooltip a span {
  display:none; /* Запрет показа подсказки без наведения */
}

.tooltip a:hover span{
  font-size:8pt; /* Задание размера шрифта подсказки */
  display:block; /* Задание показа подсказки */
  position:absolute; /* Задание положения подсказки */
  top:-15px; /* Задание отступов */
  left:50px;
  background:#65b5ff; /* Задание цвета фона подсказки */
  border:1px solid #002649; /* Задание границы поля подсказки */
  color:#fff; /* Задание цвета шрифта подсказки */
  width:110px; /* Задание ширины поля подсказки */
  padding:5px;
  opacity: 0.8; /* Задание прозрачности поля подсказки */
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}