Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.
Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных div-контейнеров для подсказок, или создание всплывающих подсказок на чистом CSS, я нашел универсальное решение которое не будет загромождать код, будет кросбраузерним, и в то же время будет очень простым для реализации.
Всех кого заинтересовал мой способ решения этой простой задачи прошу под кат.
Решение
Способ, который я вам предложу, достаточно прост и эффективен. Работает во всех браузерах, даже в ІЕ 6 (Многократно тестировано мной). Легко изменим и удобен. Не загромождает код и делает его наглядным.Его можно легко изменить по свои нужды. Например, сделать задержку вывода подсказки через setTimeout или другое.
HTML
Предположим у нас есть HTML-страница со ссылкой при наведении на которую нам нужно вывести подсказку:
<!DOCTYPE html>
<html>
<head>
<title>Всплывающие подсказки</title>
<meta charset="utf-8" />
<link href="style.less" rel="stylesheet/less" type="text/css" />
<script type="text/javascript" src="js/less.lib.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<a href="#" alt="link" >Ссылка</a>
<div id="tooltip"></div>
</body>
</html>
Как вы уже могли заметить из листинга, я использую css-препроцессор LESS.
Мы подключили в отдельные файлы CSS-стили и скрипты. Еще у нас есть одна ссылка и блок div который и будет контейнером для подсказки.
Спецификация HTML5 разрешает использовать пользовательские атрибуты типа data-atribute, в которых можно сохранять некую информацию об элементе или блоке. Именно в data-атрибутах мы будем сохранять текст всплывающих подсказок.
<a href="#" alt="Ссылка" data-tooltip="Текст подсказки">Ссылка</a>
Для хранения я использую атрибут data-tooltip.
C HTML закончили — можно перейти к стилям.
CSS
Я использую библиотеку LESS Elements и всем советую, поэтому некоторые свойства я напишу с использованием данного фреймворка.
@import "css/elements.less";
#tooltip {
z-index: 9999;
position: absolute;
display: none;
top:0px;
left:0px;
background-color: #000;
padding: 5px 10px 5px 10px;
color: white;
.opacity(0.5);
.rounded(5px);
}
С листинга понятно, что в первой строчке мы подключаем LE, задаем блоку div#tooltip абсолютное позиционирование и скрываем его. Дальше мы задаем блоку фоновый цвет и цвет текста, делаем скругление уголки (5px) и устанавливаем значение прозрачности на 50%.
jQuery
Ну а теперь самое интересное — jQuery.
$.jQuery(document).ready(function() {
$("[data-tooltip]").mousemove(function (eventObject) {
$data_tooltip = $(this).attr("data-tooltip");
$("#tooltip").text($data_tooltip)
.css({
"top" : eventObject.pageY + 5,
"left" : eventObject.pageX + 5
})
.show();
}).mouseout(function () {
$("#tooltip").hide()
.text("")
.css({
"top" : 0,
"left" : 0
});
});
});// Ready end.
Теперь мы добавляем в выборку все элементы с атрибутом data-tooltip и при наведении на нужный элемент мышью получаем значение подсказки и сохраняем его в переменной. Дальше добавляем текст подсказки в блок #tooltip, задаем ему координаты курсора от края станицы + 5 px и наконец выводим блок с подсказкой в нужном месте. После ухода мыши с элемента мы прячем блок #tooltip, чистим его содержимое и возвращаем в 0;0;.
Вот и все! Благодаря такому простому скрипту все элементы на странице, у которых будет атрибут data-tooltip, получат подсказку.
Спасибо за внимание!
Автор: denysd
