Как создать красивую всплывающую подсказку на сайте с помощью CSS?

Тема данной статьи - всплывающие подсказки. Для большинства решений достаточно всего только CSS. При наведении на определённый элемент будет появляться другой до этого скрытый.



Смотрим пример. Ниже демка и исходники.

Код CSS

<style>
body {
    font: 14px/150% Tahoma, Verdana, sans-serif;
}
.tooltip {
    position: relative;
    }
.tooltip em {
    display: none;
    }
.tooltip:hover em {
    font-style: normal;
    display: block;
    position: absolute;
     background: rgba(0,0,0,.7);
    color: #FFF;
    padding: 3px 5px;
    bottom: 22px;
    right: 0;
    box-shadow: 0 0 5px #ccc;
     border-radius: 5px;
    -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #ccc;
    -moz-box-shadow: 0 0 5px #ccc;
}
.tooltip:hover em i {
    position: absolute;
    bottom: -7px;
    right: 5px;
    border-top: 7px solid rgba(0,0,0,.7);
    border-left: 7px solid transparent;
    display: block;
}
.justify {
    text-align: justify;
}
</style>

Код HTML

<div class="justify">
   <p>Марс — четвёртая по удалённости от Солнца и седьмая по размерам планета Солнечной системы; масса планеты составляет 10,7 % массы Земли.</p><p>Названа в честь Марса — древнеримского бога войны, соответствующего древнегреческому Аресу.</p>
   <span class="tooltip"><u>Подробнее ознакомиться</u><em>Прочитать обзоры и научные материалы<i></i></em></span>
</div>

Можете выбирать любые фразы, целые предложения или изображения, чтобы использовать подсказки.

Демонстрация Скачать исходники

Спасибо за внимание! Украшайте сайт!)