Tooltip с помощью CSS3
Минимализм в веб дизайне имеет очень хороший потенциал. Сайты без загруженности графикой помогают пользователю расслабиться, просматривая ваш сайт, и сконцентрироваться на основном контенте. Хорошей идей будет, если вы захотите своё меню представить иконками, а не текстом. Хотя и стоит подбирать иконки, сразу ассоциирующиеся с тем или иным словом, не всем пользователям может быть понятно куда приведет их ссылка после клика по иконке. В этом случае вам поможет tooltip. Хотя часто это бывает просто "модно".
Мы не будем использовать никаких Javascript, и CSS3 анимации, которые на данный момент еще не очень-таки поддерживаются браузерами. Я покажу на примере текста и аннотаций к нему. Давайте приступим. Но сразу предупрежу, что новичкам будет понять сложно, так как разжевывать я особо не буду.
HTML5
С HTML у нас все просто. Внутри тега small мы разместим текст, который будет выводится в тултипе. Тегом span обернем слово или фразу вместе с самим текстом тултипа, при наведении на который он будет появляться.
CSS
Предположим, что тултипы будут в блоке #text. Для начала поработаем над стилями тега span. Сделаем его расположение относительным, чтобы тег small, которому мы применим абсолютное позиционирование не улетел, а также подчеркнем его, дабы пользователь видел, что если сюда навести курсор, то что то эдакое произойдет.
Ничего после этих действий, кроме как подчеркивания, не поменялось. Перейдем-ка к тегу small. Оформим наш тултип и поставим его на нужное нам место.
Я сделал его для темного дизайна, какой можно видеть в демо. Но это не суть :). Основное - это то, что мы убрали видимость тултипа, сделали абсолютное позиционирование и с помощью свойств left, top и margin установили положение ровно над текстом, но где-то вверху... далеко вверху. При наведении мы поставим его куда надо. Также сделали прозрачность 0, чтобы потом плавно, с помощью transition, сделать прозрачность 1. Конечно, можно было бы сделать display:none и при наведение обратить в блок, но тогда у нас не будет плавности.
Тултип должен появляться при наведении. Ведь так? Так давай же при наведении на span поставим small на нужное место и уберем прозрачность:
Отлично! Наш тултип уже работает. Но резкое появление не вызывает никакой привлекательности, поэтому добавим ее с помощью CSS свойства transition, которое сделает переход opacity со значения 0 до 1 плавным. Подробно я на нем останавливаться не буду, но обязательно напишу отдельную статью про это свойство, так как оно весьма интересное.
Свойство transition добавляем к нашему первому куску кода.
Обратите внимание, на то, что без префикса эта штука не работает в браузере Chrome на данный момент. Не забывайте писать вначале свойства с префиксом, а потом без него, так как последним браузер отдает большее предпочтение, а свойства с префиксами могут быть недоработанными, поэтому... я думаю вы поняли :).
Ну вот собственно и все. Спасибо за внимание!
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 на данный момент. Не забывайте писать вначале свойства с префиксом, а потом без него, так как последним браузер отдает большее предпочтение, а свойства с префиксами могут быть недоработанными, поэтому... я думаю вы поняли :).
Ну вот собственно и все. Спасибо за внимание!