Простые всплывающие подсказки на 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-файл с исходным кодом демо-страницы

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

28 комментариев:

  1. Очень полезная плюшка! Спасибо!

    ОтветитьУдалить
  2. очень интересно и палезно, попробую разобраться! Спасибо!

    ОтветитьУдалить
  3. Я начинающий блоггер. Очень ваш ресурс мне помогает. Правда, не всегда хватает мозгов. Все проделала, как у вас написано в этом посте, но при нажатии на значок, у меня ничего не появляется((( Понимаю, что спрашивать, не показывая, что я делала, немного нелепо, но может быть подскажете, в чем у меня загвоздка?

    ОтветитьУдалить
    Ответы
    1. Ирина, спасибо за доверие, но вы правильно заметили что спрашивать не показывая немного нелепо. Ведь не видя ошибки, я не могу вам помочь. Но возможно вам нужно убрать из CSS при добавлении, сноски - /*...*/, в этом часто бывает ошибка. А в остальном, уж простите, как говорится, - надо видеть пациента.

      Удалить
  4. Круто. Можно вас попросить,сделать чтобы контент размещался не внутри тега "a" в как у вас во втором примере что на скриптах сделано? Но втором примере применяется скрипт, если его не использовать, то при клике по открывшемуся блоку он пропадает, а если скрипт не отключать, то закрыть блок можно только если нажать на крестик, а хотелось как в первом варианте по любому месту экрана. Хотелось чтоб без скриптов, немного изменить первый вариант чтоб контент находился как во втором было бы здорово. Спасибо

    ОтветитьУдалить
    Ответы
    1. Такое сделать можно, но это уже совсем другая история и совершенно другой код. Для такого варианта можно использовать IMPUTы и псевдокласс:checked , но тогда CSS нужно прописывать отдельно для каждой подсказки. Вариант со скриптом самый простой, поэтому и сделан по минимуму, чем больше функций - тем больше код, это уже будет не простой скрипт, а целый плагин. Если вам нужно без скрипта то используйте этот вариант, внутри можно разместить все , кроме ссылок.

      Удалить
  5. извиняюсь, немного поразмышлял, всё в порядке, этот вариант что без скрипта подходит, но вот столкнулся единственное с одной проблемой, ссылки размещать в блоке можно также кликать тоже можно, но вот если разместить в этом блоке тег список(select->option) и кликнуть по списку, то блок сразу исчезает, я так понимаю тут уже это не исправить? А можно в новом скрипте сделать что-то, чтобы не использовать плагин hoverIntent?

    ОтветитьУдалить
    Ответы
    1. Просто список select так устроен, если это можно так назвать, что отображается поверх всего, вне зависимости от z-index и положения в коде, поэтому ссылка теряет фокус и блок исчезает. Но я когда ее делал даже не думал о том чтобы в нее такой список пихать.:)
      hoverIntent можно и не использовать, если нужна просто подсказка по клику, или использовать обычную функцию hover(), но тогда нужно прописывать таймауты для появления при наведении чтобы не было зацикливания. А так этот плагин решает эту проблему.

      Удалить
  6. Анонимный05.11.13, 15:36

    Здравствуйте.

    Пользовался вашим подсказкой около 6 месяцев и все работало. Но с недавних пор, подсказка работать перестала.

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

    Я попробовал использовать другие сервисы для моей идеи и это не помогло, результат одинаковый. В тоже время если в подсказке стоит текст, то все работает правильно. И если щелкать текст внутри подсказки, его можно выделить, скопировать и даже посмотреть код html/Подсказка исчезает при клике не на нее, а в другой области экрана.

    Получается разница стала в том, что если я использую кнопки то при щелчке по подсказке она исчезает, а при использовании текста внутри подсказки она остается и я должен сам ее закрыть щелкнув в другом месте экрана (т.е как мне и нужно).

    Как мне сделать чтобы подсказка не исчезала и срабатывала кнопка соц.сетей ума не приложу. Буду рад любым идеям.

    ОтветитьУдалить
  7. Анонимный05.11.13, 18:29

    Этот комментарий был удален администратором блога.

    ОтветитьУдалить
    Ответы
    1. Такое происходит скорее всего из-за того, что блок внутри подсказки получается , как бы, поверх него и поэтому когда в совершаете клик, то ссылка (родитель) теряет фокус соответственно "пузырь" исчезает. Для более стабильной работы вы можете использовать вариант со скриптом
      http://www.magentawave.com/2013/02/simple-jquery-tooltip.html
      на днях обновлю статью и код, он проще и правильнее. Но в любом случаи я посмотрю что можно сделать с вашей проблемой, если вам удобнее, можете написать мне на почту admin@magentawave.com

      Удалить
  8. Анонимный06.11.13, 10:44

    Спасибо, что ответили мне. Сейчас я решил проблему, и этот вариант меня вроде бы устраивает.
    Как я уже говорил раньше все работало, и честно говоря все это толкает меня на мысль, что мир перевернулся и изменилась какая-то валидация для псевдокласса focus. Я заменил его на hover и все заработало.
    Теперь при наведении мышкой вылезает подсказка и кнопки кликабельны.

    ОтветитьУдалить
  9. Спасибо за материал) Очень просто, доступно и доходчиво, а главное с учетом требований по минимизации всего до чего дотягиваешься) Так держать)

    ОтветитьУдалить
  10. Анонимный27.02.14, 20:39

    Здравствуйте.
    Дополнительная обертка - контейнер с классом .tip-block - используется для того, чтобы относительно него манипулировать положением подсказки с абсолютным позиционированием.
    Вопрос, почему если убрать полностью этот ^span class".tip-block "^ ^/span^ то подсказка не появляется? знак вопроса меняет свой цвет, но подсказка не появляется. Хотя написано что он нужен для того чтобы относительно него манипулировать положением подсказки.

    ОтветитьУдалить
    Ответы
    1. Смотрите код и учите спецификацию CSS.

      Удалить
  11. Здравствуйте,
    можно ли сделать, чтобы после появления по клику, подсказка сама исчезла, через некоторое время?

    ОтветитьУдалить
    Ответы
    1. Да, такое сделать можно, все зависит от скрипта. Но этот вариант является устаревшим, поэтому скоро будет обновлен.

      Удалить
  12. Александр05.08.14, 15:49

    Добрый день, как вставить в подсказку простую таблицу? Помогите разобраться.

    ОтветитьУдалить
  13. Здравствуйте,
    подскажите, как сделать, чтобы при клике на ссылку, содержащейся во всплывающей подсказке (использую появление при клике, блок после ссылки), подсказка не пропадала. Понимаю, что дело все в фокусе, но в чем конкретно?
    Спасибо!

    ОтветитьУдалить
  14. Анонимный25.08.15, 20:16

    Перекопал пару десятков сайтов и вот, у Вас нашел именно те подсказки, которые мне нужны. Спасибо.

    ОтветитьУдалить
  15. А если на странице на надо вывести 2 подсказки по примеру второму? у меня показывает только одну вторую нет. Чем их друг от друга отделять?

    ОтветитьУдалить
    Ответы
    1. Для каждой такой подсказки на странице необходимо указывать уникальные значения для тегов ID и соответствующие для FOR в каждой конструкции. В и состоит сложность.

      Удалить
  16. Здравствуйте, Александр! Как сделать, чтобы в подсказке записать текст с переносом строк, типа стихотворения.Пробовала br и pre, они появляются вместе с текстом а перенос строки не происходит.Как бы вы сделали? вот скриншот, где надо данные выстроить в столбик http://prntscr.com/dabg58

    ОтветитьУдалить
    Ответы
    1. какой вариант подсказки вы используете?

      Удалить
  17. Самый первый код в вашей статье, текст ввожу в data-title="текст"

    ОтветитьУдалить
    Ответы
    1. Чтобы сделать перенос строки в этом варианте, в нужном месте вставьте символ переноса - &#013;

      Удалить

Следующее Предыдущее

BestProject