Назад

Tooltip с помощью CSS3

Опубликовано в Блог » CSS,
Tooltip с помощью CSS3
Минимализм в веб дизайне имеет очень хороший потенциал. Сайты без загруженности графикой помогают пользователю расслабиться, просматривая ваш сайт, и сконцентрироваться на основном контенте. Хорошей идей будет, если вы захотите своё меню представить иконками, а не текстом. Хотя и стоит подбирать иконки, сразу ассоциирующиеся с тем или иным словом, не всем пользователям может быть понятно куда приведет их ссылка после клика по иконке. В этом случае вам поможет tooltip. Хотя часто это бывает просто "модно".
Мы не будем использовать никаких Javascript, и CSS3 анимации, которые на данный момент еще не очень-таки поддерживаются браузерами. Я покажу на примере текста и аннотаций к нему. Давайте приступим. Но сразу предупрежу, что новичкам будет понять сложно, так как разжевывать я особо не буду.



HTML5

С HTML у нас все просто. Внутри тега small мы разместим текст, который будет выводится в тултипе. Тегом span обернем слово или фразу вместе с самим текстом тултипа, при наведении на который он будет появляться.

<section id="text">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum <span>porta<small>Tooltip text</small></span> tempor neque, sit amet vestibulum magna tristique pulvinar.</p>
</section>


CSS

Предположим, что тултипы будут в блоке #text. Для начала поработаем над стилями тега span. Сделаем его расположение относительным, чтобы тег small, которому мы применим абсолютное позиционирование не улетел, а также подчеркнем его, дабы пользователь видел, что если сюда навести курсор, то что то эдакое произойдет.

#text span {
	cursor: pointer;
	position: relative;
	text-decoration: underline;}
#text span:hover {color: #3857bb}


Ничего после этих действий, кроме как подчеркивания, не поменялось. Перейдем-ка к тегу small. Оформим наш тултип и поставим его на нужное нам место.

#text span small {
	background: #050505;
	border-top: 1px solid #1a1a1a;
	border-left: 1px solid #1a1a1a;
	border-right: 1px solid #323232;
	border-bottom: 1px solid #323232;
	border-radius: 3px;
	color: #fff;
	font-size: 11px;
	position: absolute;
	left: 50%;
	top: -9999px;
	margin: 0 0 0 -50px;
	width: 100px;
	height: 24px;
	text-align: center;
	opacity: 0;}


Я сделал его для темного дизайна, какой можно видеть в демо. Но это не суть :). Основное - это то, что мы убрали видимость тултипа, сделали абсолютное позиционирование и с помощью свойств left, top и margin установили положение ровно над текстом, но где-то вверху... далеко вверху. При наведении мы поставим его куда надо. Также сделали прозрачность 0, чтобы потом плавно, с помощью transition, сделать прозрачность 1. Конечно, можно было бы сделать display:none и при наведение обратить в блок, но тогда у нас не будет плавности.

Тултип должен появляться при наведении. Ведь так? Так давай же при наведении на span поставим small на нужное место и уберем прозрачность:

#text span:hover small {
	top: -32px;
	opacity: 1;}


Отлично! Наш тултип уже работает. Но резкое появление не вызывает никакой привлекательности, поэтому добавим ее с помощью CSS свойства transition, которое сделает переход opacity со значения 0 до 1 плавным. Подробно я на нем останавливаться не буду, но обязательно напишу отдельную статью про это свойство, так как оно весьма интересное.

Свойство transition добавляем к нашему первому куску кода.

#text span small {
    -moz-transition: opacity 0.15s ease-in-out;
    -webkit-transition: opacity 0.15s ease-in-out;
	transition: opacity 0.15s ease-in-out;}


Обратите внимание, на то, что без префикса эта штука не работает в браузере Chrome на данный момент. Не забывайте писать вначале свойства с префиксом, а потом без него, так как последним браузер отдает большее предпочтение, а свойства с префиксами могут быть недоработанными, поэтому... я думаю вы поняли :).

Ну вот собственно и все. Спасибо за внимание!



Шаблоны для dle 10 - 10.1css3_tooltip_inferusvv.ru.zip [41,93 Kb] (cкачиваний: 74)скачать dle 10.1русский торрент трекер