Всплывающие подсказки (ToolTips) на CSS.



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

Должна уточнить, что в браузерах Internet Explorer 8 и старше подсказки будут выглядеть иначе, чем в современных (так как они не поддерживают CSS3)

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

Свойства border-radius и box-shadow придают прямоугольнику симпатичный вид с закругленными углами.

Различные типы подсказок

Начинаем со страницы HTML.

Пример записи кода:

<body> <a class="tooltip" href="#">классическую подсказку<span class="classic">Пример подсказки с использованием CSS!</span></a>, <a class="tooltip" href="#">критическое сообщение<span class="custom critical"><img src="../Poleznoe/Les_FISHKI/Critical.png" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Пример подсказки с использованием CSS!</span></a>, <a class="tooltip" href="#">Помощь<span class="custom help"><img src="../Poleznoe/Les_FISHKI/Help.png" alt="Помощь" height="48" width="48" /><em>Помощь</em>Это Пример подсказки с использованием CSS!</span></a>, <a class="tooltip" href="#">информация<span class="custom info"><img src="../Poleznoe/Les_FISHKI/Info.png" alt="Информация" height="48" width="48" /><em>Информация</em>Пример подсказки с использованием CSS!</span></a> <a class="tooltip" href="#">предупреждение<span class="custom warning"><img src="../Poleznoe/Les_FISHKI/Warning.png" alt="Предупреждение" height="48" width="48" /><em>Предупреждение</em>Пример подсказки с использованием CSS!</span></a>. <br/> </body>

Для подсказок устанавливаем класс "tooltip" с элементами ссылок <a>. Каждая ссылка содержит элемент span с текстом подсказки. для каждого элемента span установлен класс, в зависимости от вида подсказки.

Элемент em используется как заголовок подсказки, а изображение как иконка.

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

Пример записи кода:

<style type="text/css"> /*Стили CSS для класса .tooltip*/ .tooltip { border-bottom: 1px dotted #000000;/*подчёркиваемая точечная линия*/ color: #000000; outline: none;/*удаляем подчёркивание и устанавливаем цвет*/ cursor: help; text-decoration: none;/*устанавливам курсор со знаком вопроса*/ position: relative; } .tooltip span { margin-left: -999em;/*скрывам всплывающую подсказку до нужного времени*/ position: absolute; } /*Стили CSS для отображения всплывающих подсказок*/ .tooltip:hover span { font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; /*CSS для рамок подсказок*/ border-radius: 5px 5px;/*радиус скругления*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);/*тени для рамки*/ -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } <strong>* html</strong> a:hover { background: transparent; }/*устанавливаем прозрачность для фона ссылки*/ /*CSS для цветовой схемы*/ .classic { background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; } </style>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


Внимание! Не забывайте правильно указывать путь к вашим картинкам, для правильного отражения на странице.