Всплывающая подсказка в тексте на CSS

Подробности

Опубликовано 26.10.2012 17:21

Есть какой то текст и необходимо в нем сделать подсказку или пояснение по тексту без применения JavaScript. Реализация оказалась совсем проста. Необходимо только текст пояснения написать в том же теге что и текст отображения.

Структура напоминает пирамиду. Встроенными областями. Можно применять к любым тегам.

    <p>Основной текст,
        <span class="tooltip">область на которой появляется подсказка
            <span>Подсказка по тексту</span>
        </span> продолжения текста
    </p>

Такой у нас вид текста и в нем есть область <span> при наведение на которую будет появляться встроенный <span> с всплывающим текстом подсказки или картинки по верх, отображает текст подсказки пока не выведите курсор из области. Похожий пример у меня написан на JavaScript только для картинки (Отобразить картинку при наведении). Теперь стили отображения:

<style type="text/css">
.tooltip span {
    display: none;
    margin-left: 8px;
    padding: 2px;
    width: 80px;
}
.tooltip:hover {
/* необходимо для IE */
    text-decoration: none;
    background: #ffffff;
}
.tooltip:hover span {
    position: absolute;
    display: inline;
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #6c6c6c;
}
</style>

Вот пример как это выглядит. Текста для пояснения в пример я добавил больше чем на картинке, но сути не меняет.

Пользуйтесь. Может вам поможет и это то что вы искали.