Главная » Полезные статьи » HTML-верстка » Еще раз про подсказки на чистом CSS
Распечатать статью

Еще раз про подсказки на чистом CSS

Создание подсказок с помощью одного лишь CSS, без использования картинок или JavaScript — дело обычное. Лично я ничего не написал на эту тему, но есть масса примеров и обучающих уроков, которые можно использовать.

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

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

 

Решение проблем с CSS-подсказками

По моему мнению, все CSS-подсказки должны удовлетворять следующим условиям:

Давайте посмотрим почему вышеназванные пункты имею значение.

  • Не требовать дополнительного HTML-кода
  • По возможности не использовать атрибут «title»
  • Изменяться по вертикали и горизонтали
  • Сохранять внешний вид, если ссылка располагается на двух строках
  • Не должны использовать процентные значения для своего расположения

Избегайте дополнительной разметки

Многие из примеров реализации подсказок на чистом CSS используют элемент span в изначально спрятанном виде. В этом нет необходимости, и я думаю, что этот способ устарел (хотя он работает в большем количестве браузеров). Наличие дополнительного текста в HTML в таком виде влечет за собой (по моему мнению) проблемы с доступностью. Вместо этого мы можем использовать псевдоэлемент, который считывает значение атрибута, когда на элемент наводишь мышкой (подробнее об этом ниже).

Избегайте атрибута «title»

Если требуется, чтобы подсказки корректно отображались во всех браузерах, лучше всего для ссылки использовать старый добрый атрибут «title» и забыть обо всех других вариантах. Однако, если вы используете свой способ и считываете значение атрибута, нельзя задействовать «title», иначе подсказка появится в двух разных местах. Это не особая проблема, но для меня такое решение избыточно и выглядит кривовато.

Используйте атрибут «data-»

Вместо использования «title», лучше вспомнить об атрибутах «data-», которые есть в HTML5 (Джон Резиг (John Resig) написал хорошую статью по этому поводу). Вкратце, это пользовательский атрибут, создаваемый с помощью приставки «data-». Например, что-нибудь вроде «data-tooltip» вполне сгодится, хотя можно использовать и другое название, главное, чтобы оно начиналось с «data-».

Избегайте искажения внешнего вида

Поскольку практически все подсказки имеют абсолютное расположение, могут возникнуть проблемы в случае если подсказка расположена не самым надежным образом. Несмотря на то, что подсказка, расположенная в середине или конце подсказываемого элемента, смотрится приятнее, лучше ее отображать в верхнем левом углу ссылки. Это поможет подсказке не появляться в ненужных местах (например когда ссылка располагается на двух строках). Чтобы решить эту проблему, некоторые используют параметр white-space: nowrap для ссылок, но я считаю, что это плохой вариант, особенно если ссылки длиннее одного-двух слов.

Избегайте процентных единиц

Еще я заметил, что многие реализации подсказок используют процентные значения для расположения самой подсказки. Может быть это и неплохо, потому что не всегда знаешь размер элемента, к которому относится подсказка. Однако я полагаю, что все же лучше использовать пиксельные значения, как в приведенных ниже примерах.

Почти железобетонное решение?

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

a[data-tooltip]:link, a[data-tooltip]:visited {
        position: relative;
        text-decoration: none;
        border-bottom: solid 1px;
}

a[data-tooltip]:before {
        content: "";
        position: absolute;
        border-top: 20px solid #0090ff;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        visibility: hidden;
        top: -18px;
        left: -26px;
}

a[data-tooltip]:after {
        content: attr(data-tooltip);
        position: absolute;
        color: white;
        top: -35px;
        left: -26px;
        background: #0090ff;
        padding: 5px 15px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        white-space: nowrap;
        visibility: hidden;
}

a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
        visibility: visible;
        -moz-transition: visibility 0s linear .3s;
}

Некоторые замечания к коду:

  • Я использую селектор атрибута для указания только тех ссылок, которые имеют атрибут «data-tooltip»
  • Текст подсказки равен значению атрибута «data-tooltip»
  • Я использую border-bottom для подчеркивания ссылок потому, что text-decoration добавляет подчеркивание и в саму подсказку
  • Код работает в IE8+ и в остальных браузерах, насколько я знаю
  • Только Firefox анимирует псевдоэлементы, поэтому в этом браузере появляется небольшая задержка реализованная с помощью CSS Transition при переходах, что, на мой взгляд, красивее
  • Подсказка сделана с использованием треугольника, построенного одним лишь CSS, и бокса с закругленными углами (которые в IE8 превращаются в прямые)
  • Я использую visibility: hidden, но вы можете указывать display: none — даже и не знаю, что лучше
  • Подсказка располагается относительно верхнего левого края элемента, чтобы не развалиться, если ссылка будет на двух строках — верхний левый угол всегда находится в одном и том же месте
  • Расположение подсказки задано с помощью пиксельных значений, что в данном случае надежнее процентных значений
  • Если соберетесь менять в коде форму подсказки, возможно потребуется изменить ее расположение

Отзывы и предложения

Если этот код можно каким-то образом улучшить, то я вас внимательно слушаю. Я также в курсе, что другие варианты могут иметь свои достоинства, о которых я не знаю. Поэтому если заметите, что я что-то упустил, в радостью обсужу все «за» и «против» подсказок на чистом CSS. Со своей стороны буду стараться вносить необходимые улучшения.

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи