slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 1401
Теги: 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(); // Удаляем блок с подсказкой
	});
});

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

demo

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

download

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

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

     


Защитный код
Обновить

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

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

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

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

IHC

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

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

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

Содержание «Курса по HTML»

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

Теги:

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

Комментариев: 0 Подробнее
Доктайп в html. Тег DOCTYPE. Просмотров 813
Доктайп в html. Тег DOCTYPE.

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

Теги:

html, html5, doctype

Комментариев: 0 Подробнее
Тег canvas - как начать рисовать?

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

Теги:

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

Комментариев: 0 Подробнее
Тег canvas - рисуем линии moveTo и lineTo.

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

Теги:

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

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

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

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

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

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.