slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 4471
Теги: css, html, css3

В этой статье мы расскажем о том, как сделать красивую всплывающую подсказку только средствами HTML и CSS.

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

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

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

Подготовим разметку для примера:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<p>Наведи на этот текст, чтобы увидеть подсказку<span class="tooltip">Всплывающая подсказка</span></p>
</body>
</html>

И соответствующие стили:

body {
	margin:70px 0 0 10px;
}

.tooltip {
	/* задаем стиль внешнего вида */
	padding:10px;
	border:1px solid #333;
	background:#666666;
	color:#fff;
	
	/* скрываем */
	display:none;
	
	/* размещаем прямо над текстом-родителем */
	bottom:101%;
	left:0;
	position:absolute;
}

	/* при наведении - показываем подсказку */
	p:hover .tooltip {
		display:block;
	}

p {
	/* обязательно, иначе подсказка уедет */
	position:relative;
}

Вроде бы вот и всё, но у этого способа есть очень много недочетов, некоторые из них:

  1. Если на странице будет два одинаковых элемента с такой подсказкой, то при наведении появятся все подсказки (решается - добавлением каждому элементу уникального класса, как следствие увеличивается html и css код)
  2. Задать отображение подсказки в правом верхнем углу, относительно текста можно, только если родительский блок подсказки занимается полностью текстом (решение - подгонять блоки по ширине под текст, например div).

Но способ хорошо работает, например для ссылок(они сжимаются по тексту), а если вам нужно сделать подсказку только для одной или нескольки ссылок, то он так же вполне подойдет, не наполняя код лишними классами и селекторами.

Пример вы можете посмотреть на демо-странице:

demo

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

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

     


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

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

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

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    7.80
  • intuit89
    6.20
  • Varvarka
    4.00
  • 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

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

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

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

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2398
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

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

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

ZOMRO аватар
А Вы знали, что на нашем сайте есть блог, где собраны статьи с интересной и, главное, полезной инфор...
Перейти в тему
ZOMRO аватар
Друзья, на нашем сайте доступен сервис, который предназначен для того, чтобы Вы могли проверить “вид...
Перейти в тему
ZOMRO аватар
Бесплатный тестовый период виртуального хостинга на 10 дней Мы гарантируем высокую стабильность и п...
Перейти в тему

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

Javascript функции

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

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

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

CPA сети 30.01.2017
CPA сети

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