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

Всплывающая подсказка

Всплывающей подсказкой называется блок с текстом, который появляется при наведении на элемент веб-страницы (рис. 1). Цель такой подсказки — дать более подробную информацию о содержимом элемента. К примеру, для ссылок подсказкой может служить адрес ссылки или краткое описание сайта, на который ведёт ссылка.

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

Для создания подсказки в HTML добавим к нужному элементу пользовательский атрибут data-tooltip с текстом подсказки.

Вывод текста и его оформление дальше возлагается на CSS. Само отображение содержимого атрибута происходит через свойство content. Добавляем его к псевдоэлементу ::after, который привязываем к селектору [data-tooltip] — это позволяет создавать подсказку для любого элемента.

Цвет фона, текста, размеры и положение подсказки также задаются в ::after . Заодно скрываем подсказку, делая её прозрачной через свойство opacity.

Там же устанавливаем и время перехода с помощью свойства transition.

Псевдоэлемент ::after является частью своего родителя, так что :hover начинает срабатывать при наведении не на саму строку, а на невидимую подсказку. Предотвратить взаимодействие курсора мыши с подсказкой можно с помощью свойства pointer-events со значением none .

Чтобы подсказка отображалась, плавно становясь непрозрачной, добавим к :hover свойство opacity со значением 1.

Сюда же можно добавить и другие свойства, вроде left и top . Тогда подсказка будет не только становиться видимой, но и немного перемещаться. В примере 1 показан окончательный код для создания всплывающей подсказки при наведении на абзац.

Источник

Всплывающая подсказка в HTML

Всплывающая подсказка в HTML

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

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

  1. Создадим параграф с текстом
  2. Пропишем ссылку внутри текста
  3. Внутри тега a вставим атрибут aria-label с текстом подсказки
  4. Стилизуем псевдоэлемент after как контейнер для текста всплывающей подсказки
  5. Сделаем при помощи before маленький треугольник
  6. Скроем псевдоэлемент на странице
  7. Покажем всплывающую подсказку при наведении на ссылку в тексте

HTML разметка

Атрибут aria-label вставляется в HTML разметку и используется, как метка для текста всплывающих подсказок. Пропишем в атрибуте текст, который будет находиться внутри всплывающей плашки.

<p>Tarwhine cow shark shortnose chimaera clingfish sleeper shark, trout-perch Alaska blackfish armored gurnard. Loosejaw wels catfish devil ray, dealfish neon tetra pencilsmelt spookfish glassfish southern Dolly Varden Siamese fighting fish; betta delta smelt Antarctic icefish. Lined sole cusk-eel coley midshipman dogteeth <a href=»#» aria-label=»This is extra information»>tetra Moorish</a> idol ronquil halfmoon javelin. Arrowtooth eel triggerfish, sailfish red velvetfish red snapper speckled trout bass mosquitofish scissor-tail rasbora.</p>

Стили CSS

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

/* текст в контейнере */
[aria-label] <
position: relative;
cursor: help;
>

Опишем свойства для псевдоэлемента after, изображающего блок для текста всплывающей подсказки. Изначально, блок с подсказкой должен быть невидимым display: none. Значение свойства white-space: nowrap не учитывает пробелы и переносы в HTML коде, это гарантирует отображение подсказки в одну строку.

/* всплывающий контейнер */
[aria-label]:after <
content: attr(aria-label); /* атрибут метка */
display: none; /* скрываем контейнер */
position: absolute;
top: 110%; /* расстояние от ссылки от верхней границы */
left: 10px; /* смещение влево */
z-index: 2; /* блок поверх параграфа с текстом */
padding: 14px;
line-height: 15px; /* выравнивание подсказки по центру */
white-space: nowrap; /* не переносить на другую строку */
color: #fff; /* цвет подсказки */
background-color: #412917; /* цвет контейнера */
border-left: 8px solid #d37092; /* красная рамка слева */
border-radius: 5px; /* скругленные края блока */
>

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

/* треугольник у контейнера */
[aria-label]:before <
content: » «;
display: none;
top: 66%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
>

При наведении на ссылку, показать всплывающую подсказку.

Похожее:  Тестирование на управленческий потенциал и управленческую готовность конкурса Лидеры России 2020

[aria-label]:hover:after, [aria-label]:hover:before <
display: block;
>

Источник



Всплывающая подсказка на CSS

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

В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content и брать значение текста из какого-либо атрибута через attr() . К сожалению, content не будет работать желаемым образом в сочетании с img , поэтому фотографии вставляются в элемент <div> , к которому добавляем атрибут 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.
Более подробное описание можно посмотреть здесь (англ.).

Похожее:  Конспект урока английского языка по теме Cooking

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

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

Общий 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.

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

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

Другой способ заключается в использовании CSS для отображения всплывающей подсказки. Он позволяет настраивать внешний вид подсказки и даже использовать изображения.

Вот HTML-код предыдущего примера.

Для реализации нового способа используется CSS-свойство content и псевдоэлемент :after.

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

Этот способ отображения всплывающей подсказки использует большое количество различных функций: свойство content, псевдоэлемент ::after, positionfor::after и т. д. Но если пользователь применяет устаревший браузер, то всплывающая подсказка не будет отображаться корректно.

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

CSS для всплывающей подсказки с изображением выглядит следующим образом:

Если веб-страница работает на основе HTML5, вы можете воспользоваться новыми пользовательскими атрибутами данными. Они позволяет реализовать подсказку в HTML-коде, а не в CSS. В этом случае подсказки являются контентом, а не стилем CSS.

Код примера на HTML5:

Демонстрация: всплывающая подсказка с использованием пользовательских атрибутов данных HTML5:

Но этот способ не будет работать в устаревших браузерах. А также в программах чтения с экрана.

Объяснение примеров кода на CSS

Часть :hover приведенного выше селектора означает, что стилевые правила применяются только тогда, когда курсор мыши наводится на элемент. Псевдоэлемент ::after гарантирует, что стили применяются к последнему дочернему элементу (который создается этими правилами) текущего элемента.

Чтобы всплывающая подсказка появлялась рядом с элементом, над которым находится указатель мыши, я использовал несколько приемов. Я установил для исходного элемента относительное позиционирование (position: relative). Это делает его точкой отсчета для position: absolute дочернего псевдоэлемента.

Затем всплывающая подсказка помещается на 1.1em ниже ссылки. Это смещает ее чуть ниже слов, чтобы она не закрывала их. А также на 1em вправо, чтобы подсказка смещалась примерно на 1 символ в сторону.

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

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

Я также присвоил значение z-index 1, чтобы всплывающая подсказка отображалась над существующим содержимым.

Остальная часть CSS-кода предназначена для управления внешним видом всплывающей подсказки и включает в себя обычные свойства padding, border и width.

Свойство content содержит саму всплывающую подсказку. Если вы хотите использовать изображение, замените текст URL-адресом этого изображения.

В примере на HTML5 создается пользовательский атрибут данных с именем «data-tooltip» и присваивается ему некоторый текст.

Затем текст вставляется в контент с помощью функции CSS attr(). Проще говоря, attr(data-tooltip) принимает значение атрибута data-tooltip и заменяет его текстом.

Вместо заключения

Какой бы способ реализации вы не выбрали, всегда не забывайте о проблемах, связанных с использованием всплывающих подсказок. Убедитесь, что важная информация всегда отображается без необходимости дополнительного взаимодействия.

Данная публикация представляет собой перевод статьи «How to Add a Tooltip in HTML/CSS (No JavaScript Needed)» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник

Adblock
detector