Создание Сайтов и их настройка

CSS Всплывающая подсказка html и css без скриптов.

Всплывающая подсказка html и css без скриптов.

И снова я рад приветствовать Вас на страницах SdelaemBlog.ru. В этот раз я хочу поговорить немного о технической части сайтостроения. Дело в том, что по прежнему в связи с работой, уделять время сайту могу урывками. Думал, о чем написать? И пришло, как-то само конечно же во время верстки очередного макета. Понадобилось сделать такую простенькую штуку, как всплывающая подсказка без использования скриптов. Вот решил собственно поделиться и с Вами. А вдруг кому пригодится?

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

Я вижу два основных метода реализации всплывающей подсказки, это при наведении, он же и самый популярный, и менее популярный при клике на какой-либо элемент. Начнем естественно с появления подсказки при наведении курсора на элемент.

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

Простой способ с оформлением, при наведении.

Здесь все не сложнее, чем в способе, который я пропустил. Только вместо атрибута title я буду использовать data-title и оформление с помощью стилей css. Собственно привожу ниже html-код:

<div data-title="такую подсказку можно оформить" class="hover">?</div>

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

/* Используем псевдоэлемент after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при наведении */
.hover:after
{content: attr(data-title);
display: none;position: absolute;
bottom: 130%;
left: 0px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;}
/* Добавляем свойство, чтобы при наведении на элемент плашка с подсказкой появилась */
.hover:hover:after{display: block;}

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

Всплывающая подсказка при наведении.

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

<div class="block"> <!-- контейнер -->
 <div class="hover">?</div> <!-- видимый элемент -->
 <span class="hidden">это подсказка с оформлением</span> <!-- скрытый элемент -->
 </div>

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

/* задаем относительное позиционирование контейнеру */
.block{position:relative;}
/* Оформление скрытого элемента по умолчанию */ 
.hidden
{display: none;
position: absolute;
bottom: 130%;
left: 0px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);
font-size: 12px;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.hover + .hidden:before
{content: " ";
position: absolute;
top: 98%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: #fff transparent transparent transparent;
z-index: 2;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.hover + .hidden:after
{content: " ";
position: absolute;
top: 100%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: rgba(0,0,0,.16) transparent transparent transparent;
z-index: 1;}
/* Появление скрытого элемента при наведении */
.hover:hover + .hidden{display: block;}

Именно эти два варианта можно использовать у Вас на сайте для выведения всплывающей подсказки при наведении курсора.

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

Простой способ с оформлением, при клике.

В случае с кликом, код будет выглядеть абсолютно так же. Единственное, что для удобства я заменил класс некоторых элементов. А так же используется псевдокласс focus вместо hover. Еще здесь стоит отметить, что чтобы данный способ срабатывал, необходимо заменить тег div на тег a, то есть на гиперссылку.

<a href="#" data-title="такую подсказку можно оформить" class="focus">?</a>

Css код в этом случае аналогичен появлению плашки при наведении, только использованы для удобства другие классы. И для правильной работы меняем псевдокласс на focus.

/* Используем псевдокласс after для оформления самой плашки, но при этом скрываем ее, так как она должна появляться только при клике */
.focus:after
{content: attr(data-title);
display: none;position: absolute;
bottom: 130%;
left: 0px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);font-size: 12px;}
/* Добавляем свойство, чтобы при клике на элемент плашка с подсказкой появилась */
.focus:focus:after{display: block;}

Как видите разницы практически нет.

Всплывающая подсказка при клике.

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

<div class="block"> <!-- контейнер -->
 <a href="#" class="focus">?</a> <!-- видимый элемент -->
 <span class="hidden">это подсказка с оформлением</span> <!-- скрытый элемент -->
 </div>

И собственно оформление плашки:

/* задаем относительное позиционирование контейнеру */
.block{position:relative;}
/* Оформление скрытого элемента по умолчанию */ 
.hidden
{display: none;
position: absolute;
bottom: 130%;
left: 0px;
background-color: #fff;
color: #3aaeda;
padding: 5px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.16);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.16);
box-shadow: 0 1px 1px rgba(0,0,0,.16);
font-size: 12px;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.focus + .hidden:before
{content: " ";
position: absolute;
top: 98%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: #fff transparent transparent transparent;
z-index: 2;}
/* Дополнительное оформление скрытого элемента(необязательно) */
.focus + .hidden:after
{content: " ";
position: absolute;
top: 100%;
left: 10%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
height: 0;
width: 0;
border: 7px solid transparent;
border-right: 7px solid #fff;
border-color: rgba(0,0,0,.16) transparent transparent transparent;
z-index: 1;}
/* Появление скрытого элемента при клике */
.focus:focus + .hidden{display: block;}

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

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

Видео урок — Всплывающая подсказка без скриптов.

На этом у меня все. Всем удачи.

Расскажи друзьям:
Поделись ссылкой:
Комментарии
  1. LM

    Добрый день.
    Существует ли такое расширение (если кто знает), чтобы отображало заранее настроенные всплывающие подсказки над разными линками из составленного нами списка?
    К примеру: на Авито наводим на линк продавца и получаем (ранее записанный нами в список) тултип-напоминалку: «жулик», или «у него купил диван» и т.п.

    Ответить
  2. аркадий

    очень раздражает на вашей странице назойливо движущийся слева блок «лучшие условия для сайта»

    Ответить
  3. Александр

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

    Ответить
    1. Михаил Веб

      Здравствуйте.
      Как я могу вам помочь, если не вижу кода? :smile:
      Покажите код, может смогу помочь

      Ответить
  4. Andrew

    Здравствуйте, скажите пожалуйста по какой причине html теги в подсказках отображаются в виде текста, как это можно исправить ?
    Спасибо

    Ответить
    1. Михаил Веб

      Здравствуйте.
      Очевидно что-то делаете не так.
      Но так как я не вижу кода, который вы используете, не могу ничего точнее сказать.

      Ответить
  5. Елена Гольникова

    Спасибо за статью, Михаил!На моем смартфоне Ваши изображения не отображаются. Проверьте текст еще разок

    Ответить
    1. Михаил Веб

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

      Ответить

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

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

Навигация по статье