Всплывающая подсказка с собственным дизайном и стилем.

0 / 5

Автор: Администратор

07.09.2015

Теги: html5, tooltip, title, jQuery, data

В этой статье мы рассмотрим валидный способ создания всплывающей подсказки для HTML5-спецификации с уникальным дизайном, который можно задать через CSS-стили.

Очень часто стандартная подсказка, всплывающая при наведении от атрибута title не подходит для дизайна внешним видом. Да и если вам просто захотелось сделать подсказку более красивой, то наш способ для вас.

Для создания такой всплывающей подсказки мы будем использовать технологии jQuery, это будут два обработчика событий - наведение на элемент с подсказкой и событие, когда мышка перестает быть наведенной на него.

Для того, чтобы наш способ был валидным, мы будем задавать элементу, у которого нужно выводить всплывающую подсказку атрибут data-description, дело в том, что в HTML5 все атрибуты, с началом data- являются валидным способом задать свой специальный атрибут.

Сделаем заготовку разметки, где будет ссылка с всплывающей подсказкой:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/tooltip.js"></script>
</head>
<body>
	<a href="#" data-description="Важная информация по ссылке">Наведи на меня, чтобы увидеть всплывающую подсказку</a>
</body>
</html>

Здесь всё стандартно - подключаем файл стилей, библиотеку jQuery, и наш скрипт, который будет отвечать за появление всплывающей подсказки.

Следующий шаг - написать стили для внешнего вида нашей всплывающей подсказки, вы можете изменять их по аналогии и задавать свой, уникальный вид:

* {
	text-align:center;
	margin:40px 0 0 0;
	position:relative;
}

.data-description {
	background:#333333;
	color:#fff;
	padding:10px 20px;
	border-radius:10px;
	border:1px solid #000000;
	position:absolute;
	bottom:101%;
	left:101%;
	min-width:150px;
	max-width:300px;
}

Осталось добавить скрипт, который будет создавать внутри элемента с подсказкой блок с классом, стилизирующим этот блок и текстом из подсказки:

$(document).ready(function() { // Ждём загрузки страницы	
						   
	$("[data-description]").mouseenter( function () { // Событие наведения на элемент с подсказкой
		var div = document.createElement('div'); // Создаем новый элемент
		$(div).addClass("data-description"); // Добавляем блоку с подсказкой класс, чтобы придать ему необходимый стиль
		$(div).append($(this).attr("data-description")); // Достаем текст подсказки и добавляем его в блок
		$(this).append(div); // Добавляем блок с подсказкой внутрь элемента
	});
	
	$("[data-description]").mouseleave( function () { // Событие снятия наведения на элемент с подсказкой
		$(this).children(".data-description").remove(); // Удаляем блок с подсказкой
	});
});

Результат проделанной работы вы сможете увидеть на Демо-странице:

А так же можете скачать файлы-примера:

Добавить комментарий

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.20
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Содержание «Курса по HTML» Просмотров 9983

Это страница с содержанием курса по HTML, который поможет любому новичку изучить и понять основы этого языка программирования.

Теги:

html, html5, курсы, обучение

Комментариев: 0 Подробнее

Доктайп в html. Тег DOCTYPE. Просмотров 1572

Каждая html-страница в идеале должна начинатся с определения доктайпа документа (doctype — document type declaration или dtd). Очень часто встречаются сайты без определения этого самого доктайпа. И это очень плохо, так как он имеет важную роль.

Теги:

html, html5, doctype

Комментариев: 0 Подробнее

Тег canvas - как начать рисовать? Просмотров 2022

В этой статье мы изучим базовые возможности тега <canvas>, чтобы у вас сложилось впечатление, что это вообще такое и как это можно использовать.

Теги:

javascript, html5, canvas, гайд, основы

Комментариев: 0 Подробнее

Тег canvas - рисуем линии moveTo и lineT... Просмотров 2882

Тег canvas - рисуем линии moveTo и lineTo.

После того, как мы разобрались с тем, что за тег canvas и как начать его использовать, то можем пойти дальше и научимся использовать карандаш и нарисуем линии.

Теги:

html5, canvas, lineTo, moveTo, рисуем

Комментариев: 0 Подробнее

Всплывающая подсказка с собственным дизайном и стилем.

Добавить комментарий

Поиск по сайту

Топ 10 активных пользователей

Рекламные ссылки

Пожертвования

Похожие материалы

Последнее с форума

Последние статьи