Недавно, когда я делал небольшой блог, передо мной встала задача сделать стильные, но одновременно простые всплывающие подсказки. Попробовав разные способы создания отдельных 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, получат подсказку.
Спасибо за внимание!
ссылка на оригинал статьи http://habrahabr.ru/post/165805/
Добавить комментарий