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

, к которому добавляем атрибут data-title с текстом всплывающей подсказки. Есть соблазн вставить атрибут title и задействовать его, но в таком случае будет выводиться одновременно две подсказки: одна «родная», а вторая наша. Так что мы используем свой собственный атрибут data-title , благо HTML5 позволяет это делать. Таким образом получим следующий код (пример 1).

Пример 1. Код HTML

HTML5 IE Cr Op Sa Fx

Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after , к которому добавляем content: attr(data-title) .

Получится, что после содержимого элемента с классом photo будет выводиться текст из атрибута data-title , что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover .

Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).

Пример 2. Стиль подсказки

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид всплывающей подсказки

Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).

Пример 3. Вывод подсказки внизу фотографии

HTML5 CSS3 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Вид всплывающей подсказки

К сожалению, свойство transition , с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after . Впрочем, если заменить этот псевдоэлемент на :after , то можно получить более-менее работающий вариант.

Источник

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

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

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

ПРИМЕР

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

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

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

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

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

* .tip-three <
display: block;
>

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

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

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

Общий CSS

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

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

33 комментария:

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

очень интересно и палезно, попробую разобраться! Спасибо!

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

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

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

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

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

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

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

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

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

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

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

Источник

Как создается всплывающая подсказка с помощью HTML и CSS

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

Проблема с всплывающими подсказками

Вот некоторые из недостатков применения всплывающих подсказок:

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

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

Метод с использованием HTML

Самый простой добавления всплывающих подсказок – атрибут title.

Посмотрите на пример, приведенный ниже.

Если вы хотите увидеть подсказку, просто наведите указатель мыши на ссылку. title — это глобальный атрибут, который можно добавлять к любому элементу HTML.

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