Всплывающая подсказка (tooltip) с помощью CSS

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

Код HTML

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

Код CSS

.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;
}

Источник