Анимированные всплывающие подсказки (tooltip) на CSS
Всплывающие подсказки это отличный способ для улучшения UI, в том случае если пользователю нужен дополнительный контекст для определенного элемента на сайте. В этом уроке мы создадим анимированные всплывающие подсказки, с использованием HTML и CSS.
Для начала взгляните на демонстрационный пример, чтобы иметь представление с чем вам придеться работать.
Для начала разберем саму концепцию всплывающей подсказки. Основная задача — обеспечить простое добавление всплывающей подсказки, для этого мы создадим пользовательский атрибут tooltip:
span tooltip="message">visible text or icon, etc. span>FAQ
- Не требует JavaScript
- Работает на селекторах атрибутов, а не на классах
- Не нуждается в отдельных элементах DOM
- Примеры кода поставляются без префиксов (вы можете добавить их в своих проектах)
- Работает при наведении курсора
- Поддерживает только текст (HTML, изображения и т.д. не поддерживаются)
- Легкая анимация при вызове всплывающих подсказок
Всплывающие подсказки будут работать полностью на псевдо-элементах ::before и ::after, которые мы можем контролировать с помощью CSS.
Еще один важный момент — позиционирование. Элемент к которому мы добавляем всплывающую подсказку, должен иметь следующее позиционирование:
Селекторы атрибутов. Быстрый взгляд
Большинство CSS правил пишутся с использованием классов. Но CSS также имеет несколько других типов селекторов. Для работы наших всплывающих подсказок мы будем использовать селектор атрибутов — они обозначаются квадратными скобками:
[foo] < background: rgba(0, 0, 0, 0.8); color: #fff; >Пример элемента с атрибутом foo:
span foo>Check it out! span>В результате span с атрибутом foo окрасится в белый цвет, с полупрозрачным черным фоном.
Почему именно селектор атрибутов?
В первую очередь мы будем использовать селектор атрибутов для разделения правил. Вы не получите никаких дополнительных преимуществ при использовании атрибутов вместо классов. Классы и атрибуты имеют одинаковую специфичность. Тем не менее, благодаря атрибутам мы можем расширить область выбора элементов, так как атрибуты могут иметь значение, а классы нет.
Рассмотрим пример: класс .tooltip vs. атрибут [tooltip]. Имя класса является одним из значений атрибута class, атрибут tooltip имеет в качестве значения текст который мы будем отображать при наведении.
span class="tooltip another-classname">lorem ipsum span> span tooltip="sit dolar amet">lorem ipsum span>Создание всплывающих подсказок на CSS
Наши всплывающие подсказки будут использовать два различных атрибута:
- tooltip: Содержит текст подсказки
- flow: опциональный атрибут, позволяет определить с какой стороны будет появляться всплывающая подсказка (сверху, снизу, слева, справа)
1. Позиционирование
Для родительского элемента установим относительное позиционирование:
[tooltip] < position: relative; >2. Псевдо-элементы
Перейдем к псевдо-элементам ::before и ::after. Свойство content является обязательным для работы псевдо-элементов, но мы определим его позже.
[tooltip]::before, [tooltip]::after < line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; /* opinions */ text-transform: none; font-size: .9em; >3. Треугольник
Обратите внимание что для создания треугольника мы используем прозрачную рамку, цвет для неё мы добавим позже, когда будем определять с какой стороны будет появляться всплывающая подсказка flow.
[tooltip]::before < content: ''; z-index: 1001; border: 5px solid transparent; >Мы оставили значение свойства content пустым, так как нам не нужно добавлять каких-либо дополнительных элементов к подсказке.
Для создания треугольника мы используем свойство border на пустом контейнере, который не имеет контента, высоты и ширины, затем устанавливаем рамку только с одной стороны контейнера.
4. Стиль всплывающей подсказки
Обратите внимание на свойство content: attr(tooltip). Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве его содержания.
[tooltip]::after < content: attr(tooltip); z-index: 1000; font-family: Helvetica, sans-serif; text-align: center; /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */ min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* visible design of the tooltip bubbles */ padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff; >5. Взаимодействие
Всплывающую подсказку мы будем вызывать при наведении курсора мыши:
[tooltip]:hover::before, [tooltip]:hover::after < display: block; >Как вы помните, на втором шаге, для всплывающей подсказки мы использовали два свойства opacity: 0 и display: none. Это для того чтобы мы могли добавить к ним анимацию для появление и скрытия подсказки.
Свойство display не может быть анимированно, но вместо этого мы можем анимировать свойство opacity. Если вы не хотите использовать анимацию, просто удалите свойство opacity: 0 из второго шага, и можете не переходить к шагу 7.
Также нам нужно предотвратить появление пустой всплывающей подсказки:
[tooltip='']::before, [tooltip='']::after < display: none !important; >6. Настройка позиционирования всплывающей подсказки
Это довольно сложный шаг, так как мы будем использовать немного не стандартные селекторы для определения позиции появления подсказки.
Для начала взглянем на селекторы которые мы будем использовать:
[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before < /* . properties: values . */ >Этом мы говорим браузеру «Для всех элементов с атрибутом tooltip, которые не имеют атрибут flow, или имеют атрибут flow со значением up и применяем эти стили для псевдо-элементов ::before«.
Вверх (по умолчанию)
[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before < bottom: 100%; border-bottom-width: 0; border-top-color: #333; > [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after < bottom: calc(100% + 5px); > [tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after < left: 50%; transform: translate(-50%, -.5em); >Вниз
[tooltip][flow^="down"]::before < top: 100%; border-top-width: 0; border-bottom-color: #333; > [tooltip][flow^="down"]::after < top: calc(100% + 5px); > [tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after < left: 50%; transform: translate(-50%, .5em); >Влево
[tooltip][flow^="left"]::before < top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%); > [tooltip][flow^="left"]::after < top: 50%; right: calc(100% + 5px); Вправо
[tooltip][flow^="right"]::before < top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%); > [tooltip][flow^="right"]::after < top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%); >7. Анимация
Для анимации нам понадобятся два @keyframes. Всплывающие подсказки которые будут появляться вверх/вниз будут использовать keyframe tooltips-vert, а всплывающие подсказки которые появляются слева/справа будут использовать keyframe tooltips-horz. Обратите внимание, что во всех ключевых кадрах мы определяем только конечные состояния анимации.
@keyframes tooltips-vert < to < opacity: .9; transform: translate(-50%, 0); > > @keyframes tooltips-horz < to < opacity: .9; transform: translate(0, -50%); > >Теперь нам нужно применить эту анимацию при наведении на элемент с атрибутом tooltip.
[tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after < animation: tooltips-vert 300ms ease-out forwards; > [tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after < animation: tooltips-horz 300ms ease-out forwards; >Вам требуются услуги или консультация специалиста по веб-разработке?
Эффекты всплывающей подсказки на CSS
Вы можете видеть подсказки при наведении курсора мыши или наведении указателя мыши, такие подсказки можно увидеть в разных местах на интернет сайте. Ведь все устанавливается в ручную, там где хотите видеть, но и безусловно прописываем заданный эффект. Где первый вариант больше на стандартный похоже при просмотре. А вот второй уже оригинальный, как и третий, что наводите курсор и снизу показывается темная подсказка с описанием.
Теперь можно задействовать эти подсказки на любом ключевом слове, это может быть навигация, но также можно наблюдать в описание эти подсказки, которые несут нужную информацию, а точнее станут дополнять общею или ключевую версию. Чтоб сразу понимать, как они выглядят на самом деле, то для этого создан предварительный просмотр, который приведен ниже.
При проверке на работоспособность, но дизайн все аналогичны, но при появление у каждого свой эффект.
Установочный процесс:
body <
margin: 0 auto;
text-align: center;
align-content: center;
font-family: ‘Rubik’, sans-serif;
color: #212121;
background-color: #d7d4ef;
>
h1 <
padding-left: 50px;
>
ul <
margin-bottom: 40px;
>
li <
cursor: pointer;
display: inline-block;
padding: 0 10px;
>
.vaspusucag <
position: relative;
>
.vaspusucag:before,
.vaspusucag:after <
display: block;
opacity: 0;
pointer-events: none;
position: absolute;
>
.vaspusucag:after <
border-right: 6px solid transparent;
border-bottom: 6px solid rgba(0,0,0,.75);
border-left: 6px solid transparent;
content: »;
height: 0;
top: 20px;
left: 20px;
width: 0;
>
.vaspusucag:before <
background: rgba(0,0,0,.75);
border-radius: 2px;
color: #fff;
content: attr(data-title);
font-size: 14px;
padding: 6px 10px;
top: 26px;
white-space: nowrap;
>
.vaspusucag.kasucan:after,
.vaspusucag.kasucan:before <
transform: translate3d(0,-10px,0);
transition: all .15s ease-in-out;
>
.vaspusucag.kasucan:hover:after,
.vaspusucag.kasucan:hover:before <
opacity: 1;
transform: translate3d(0,0,0);
>
.vaspusucag.podskazka:before <
transform: scale3d(.2,.2,1);
transition: all .2s ease-in-out;
>
.vaspusucag.podskazka:after <
transform: translate3d(0,6px,0);
transition: all .1s ease-in-out;
>
.vaspusucag.podskazka:hover:before,
.vaspusucag.podskazka:hover:after <
opacity: 1;
transform: scale3d(1,1,1);
>
.vaspusucag.podskazka:hover:after <
transition: all .2s .1s ease-in-out;
>
.vaspusucag.canedsa:before,
.vaspusucag.canedsa:after <
transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
transform-origin: 0 0;
transition: transform .15s ease-in-out, opacity .2s;
>
.vaspusucag.canedsa:after <
transform: translate3d(0,60px,0);
transition: transform .15s ease-in-out, opacity .2s;
>
.vaspusucag.canedsa:hover:before,
.vaspusucag.canedsa:hover:after <
opacity: 1;
transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
>
@media (max-width: 765px) <
body <
text-align: left;
>
>
Что уже самостоятельно ставите оттенок, а редактировать не рекомендую, но разве кому-то захочется шире в объеме сделать. Тут нужно понимать, что под каждый элемент присутствует треугольник, что аналогично на стилистике создан, где при любом изменение его нужно выставлять по каркасу, чтоб корректно выглядело.
Видео обзор на все варианты подсказок:
Создание анимированных tooltips’ов с помощью CSS3
Статьи про создание tooltips’ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.
В качестве примера были сделаны иконки социальных сервисов, при наведении на которые показываются названия этих сервисов.
Неупорядоченный список сервисов:
Основной стиль для иконок и дополнительные стили для их позиционирования.
.tt-wrapper li a < display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; background: transparent url(../images/icons.png) no-repeat top left; position: relative; >.tt-wrapper li .tt-gplus < background-position: 0px 0px; >.tt-wrapper li .tt-twitter < background-position: -68px 0px; >.tt-wrapper li .tt-dribbble < background-position: -136px 0px; >.tt-wrapper li .tt-facebook < background-position: -204px 0px; >.tt-wrapper li .tt-linkedin < background-position: -272px 0px; >.tt-wrapper li .tt-forrst
Внутрь элементов мы спрячем всплывающие подсказки, предварительно установив нулевую прозрачность, а скорость «всплытия» сделаем равную 0.3. В первом примере подсказки будут появляться сверху, поэтому расположим их на 100 пикселей выше иконок.
.tt-wrapper li a span
Появление происходит при наведении курсора на иконки или при наведении на место, где расположена сама подсказка. Указатель будет сделан с помощью псевдо-элементов before и after и будет представлять собой треугольник с небольшой тенью.
.tt-wrapper li a span:before, .tt-wrapper li a span:after < content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); >.tt-wrapper li a span:after
При самом наведении, мы увеличим прозрачность блока с подсказкой до 0.9 и зададим границу появления.
.tt-wrapper li a:hover span
Вот такой простой способ. В демо можно увидеть еще три других примера. Исходники можно скачать вот здесь.
К сожалению, примеры будут работать только в тех браузерах, которые поддерживают псевдо-элементы и свойство transitions.
Оформление всплывающих подсказок — всплывающие подсказки CSS
Оставим ненадолго обучение технологии CSS3 и посмотрим небольшой набор оригинально оформленных всплывающих подсказок для сайта. Ведь всплывающие подсказки могут значительно сократить используемую область на сайте, а точнее место. Их также удобно показывать при регистрации человека на сайте. То есть человек может подвести курсор мыши к определенному слову и ему покажется подсказка. Но вот как же красиво и элегантно оформить эти подсказки мы рассмотрим в этой статье. Оригинальные примеры оформления всплывающих подсказок смотрите ниже:
Посмотреть примерСкачать
- CSS анимированные всплывающие подсказки
- Красивая всплывающая подсказка при нажатии
- Всплывающие подсказки CSS3
Посмотрим подробнее | Оформление всплывающих подсказок
HTML часть
Давайте рассмотрим на примере «Блока».
Для начала между тегами подключаем файл стилей:
link rel="stylesheet" type="text/css" href="css/tooltip-box.css" />
Где окончание «-box» (например, «-flip» или «-line») это и есть тот файл стилей, который соответствует выбранному эффекту.
Далее, пока что не совсем понятный, код:
p>. Текст . span class="tooltip toolti p-effect-1">span class="tooltip-item">ключевое слово/span>span class="tooltip-content clearfix">span class="tooltip-text">. Текст во вслывающем окне . /span>/span>/span>. Текст . /p>
На место ключевого слова необходимо разместить то слово, при наведении на которое будет появляться всплывающая подсказка.
CSS часть
Хорошо, с HTML разобрались. Но что же находится в CSS?
Опять же посмотрим для примера «Блок»:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71
.tooltip { display: inline; position: relative; z-index: 999; } /* Выделение "ключевого слова" */ .tooltip-item { color: #2fa0ec; cursor: pointer; z-index: 100; position: relative; display: inline-block; font-weight: 700; -webkit-transition: background-color 0.3s, color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, color 0.3s, transform 0.3s; } .tooltip:hover .tooltip-item { color: #fff; -webkit-transform: translate3d(0,-0.5em,0); transform: translate3d(0,-0.5em,0); } /* Подсказка */ .tooltip-content { position: absolute; z-index: 99; width: 360px; left: 50%; margin-left: -180px; bottom: -5px; text-align: left; background: #2fa0ec; opacity: 0; font-size: 0.75em; line-height: 1.5; padding: 1.5em; color: #fff; border-bottom: 65px solid #2a3035; cursor: default; pointer-events: none; border-radius: 5px; font-family: 'Indie Flower', cursive; webkit-transform: translate3d(0,-0.5em,0); transform: translate3d(0,-0.5em,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .tooltip-content a { color: #32434f; } .tooltip-text { opacity: 0; -webkit-transform: translate3d(0,1.5em,0); transform: translate3d(0,1.5em,0); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; } .tooltip:hover .tooltip-content, .tooltip:hover .tooltip-text { pointer-events: auto; opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
Самое сложное здесь — это свойство transform . Но если вы изучали уроки по CSS преобразованиям, то ничего сложного для вы здесь не заметите.
Вывод
Еще один набор оригинально оформленных всплывающих подсказок для вашего сайта. Смело используйте их у себя на сайте!