Простые всплывающие подсказки на CSS

Для пояснения или размещения дополнительной информации на сайтах, часто используются всплывающие подсказки. Стандартным инструментом для добавления описания к элементам, является HTML-атрибут title, но его возможности, весьма ограничены, поэтому часто возникает потребность в создании более функциональных подсказок с собственным оригинальным оформлением.
  В данной статье представлены несколько способов как сделать всплывающую подсказку на CSS без применения JavaScript, с возможностью размещения изображений и дополнительных блоков, появляющуюся по клику и при наведении на элемент курсора.

ПРИМЕР

Реализация простых подсказок с помощью атрибута data-title

  Самый простой вариант - это CSS-стилизация обычной, текстовой подсказки. Для этого нужно использовать атрибут data-title, вместо привычного title, чтобы избежать появления сразу двух подсказок - с собственным оформлением и стандартным, которое изменить нельзя.


HTML конструкция выглядит так:

<span class='support' tabindex="1" data-title='Текст подсказки'>
 <em>?</em>
</span>

Атрибут tabindex для тегов, которым нужно принудительно придать фокус по клику - обязателен(!), как и его значение - любое целое число. Иначе для ссылки или другого тега псевдокласс :focus не сработает. Уникальность значения для данного атрибута на странице не важна.

  Подсказка будет выводиться с помощью псевдоэлемента :before, оформленного соответствующим образом.

span.support::before {
   content: attr(data-title); /*помещаем подсказку в псевдоэлемент*/
   display: none; /*скрываем подсказку*/
}

  Чтобы реализовать появление данной подсказки по клику применяется такой CSS-код:

span.support:focus::before {
   display: block;
}

Чтобы сделать принудительный перенос строки в всплывающей подсказке из стандартного атрибута title или сделанной с помощью альтернативного атрибута - data-title, достаточно в нужном месте вставить HTML-символ переноса - &#013;

Подсказка появляющаяся по клику реализация с помощью тега ссылки

  Пример, когда блок с подсказкой находится внутри ссылки:

<a class='support' tabindex="1"><em>?</em>
 <span class='tip'>
  <!--Текст подсказки-->
 </span>
</a>

a.support:focus .tip {
  display:block;
}

  Расположение непосредственно после ссылки:

<a class='support' tabindex="1"><em>?</em></a>
<span class='tip-block'>
 <span class='tip'>
  <!--Текст подсказки-->
 </span>
</span>

a.support-two:focus + .tip-block .tip-two {
  display:block;
}

Дополнительная обертка блока подсказки - контейнер с классом .tip-block - используется когда подсказка расположена непосредственно рядом с вызывающим её элементом, чтобы относительно него манипулировать положением подсказки с абсолютным позиционированием.

.tip-block {
  display: inline-block;
  position: relative; /*обязательно*/
  background: transparent;
  margin: 0;
  padding: 0;
  border: 0;
  height: 0;
  width: 1px;
}

Создание подсказка появляющейся по клику с помощью тега INPUT

  При использовании многофункционального тега формы <input> HTML-конструкция немного сложнее чем предыдущие. В примере также добавлен дополнительный элемент - крестик для закрытия подсказки (тег <label> с классом .tip-close) - он не обязателен, но позволяет несколько улучшить функционал.

<input type="checkbox" id="tip-checkbox" class="tip-checkbox">
<label for="tip-checkbox" class="support"><em>?</em></label>
<span class='tip-block'>
 <span class="tip">
   <!--Текст подсказки-->
  <label for="tip-checkbox" class="tip-close">X</label>
 </span>
</span>

  Прежде всего нужно убрать ячейку флажка:

.tip-checkbox {
  display: none;
}

  Показ подсказки организован следующим образом:

#tip-checkbox:checked ~ * .tip-three {
  display: block;
}

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

Псевдокласс :checked применяется к таким элементам как переключатели(type="radio") или флажки(type="checkbox"), когда они выбраны, при этом позволяя манипулировать основным и соседними (+ или ~) элементами, применяя к ним необходимые свойства.
 На словах такая хитрость или как говорят - CSS:checked хак, будет звучать примерно так: "Если флажок установлен, применить следующий стиль, к такому-то элементу." Пример из этой статьи является одним из многочисленных вариантов использования :checked.
 Более подробное описание можно посмотреть здесь (англ.).

Подсказка появляющаяся при наведении курсора

  Для того чтобы организовать вывод подсказки на экран таким образом, достаточно вместо псевдокласса :focus использовать :hover.
  Например:

a.support-hover:hover .tip {
  display:block;
}

или

a.support-hover:hover + .tip-block .tip {
  display:block;
}

- когда блок расположен непосредственно рядом с вызывающим элементом.

Общий CSS

  Для всех элементов, с соответствующими селекторами, сразу можно задать общие стили, которые будут одинаковы для любой конструкции:
  - для основного блока (элемента с классом .support):

.support {
  display: inline-block;
  position: relative; /*обязательное параметр*/
  text-decoration: none;
  cursor: pointer;
}

  - оформление виде кнопки (тег <em>):

.support em {
  background: #FF6600;
  border-radius: 20px;
  border: 1px solid #999;
  text-align: center;
  color: #FFF;
  font: normal bold 16px Arial;
  padding: 0 4px;
}

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

.tip,
span.support::before/*если используется атрибут data-title*/ {
   display: none;
   position: absolute;
   z-index: 9998;
   top: 0;
   left: 100%;
   background: #EDEDED;
   text-align: left;
   color: #000;
   cursor: default;
   padding: 5px;
   margin: -15px 0 0 10px; /*регулирует положение, значения зависят от применяемой конструкции*/
   width: 200px;
   min-height: 50px;
   height: auto;
}

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

*:focus {
  outline: none;
}

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

 Просмотреть весь код целиком и самостоятельно поработать с ним, можно скачав HTML-файл с исходным кодом демо-страницы

На этом пака что все.