О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Всплывающая подсказка с HTML кодом
  • Инструменты
  • Заработок
  • Раскрутка
25 июня 2015 . Антон Кулешов

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

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

Сегодня мы будем делать три вида подсказок: текстовая всплывающая подсказка, всплывающая подсказка со ссылкой и всплывающая подсказка с картинкой. Для этого мы будем использовать лишь HTML и CSS3.

В предыдущих статьях я рассматривал похожие варианты, которые, возможно, будут вам более подходящими:

Как сделать всплывающие подсказки;

Всплывающие подсказки на чистом CSS.

И так, давайте притупим и начнём c разметки нашей будущей подсказки:

<div class="help-tip">
   <p>
       <!-- 
            Здесь будет находиться
           нужный нам контент
      -->
 </p>
</div>

Теперь займёмся CSS стилями и начнем, пожалуй, с обёртки:

.help-tip{
 position: absolute;
 top: 18px;
  right: 18px;
    text-align: center;
 background-color: #bcdbea;
  border-radius: 50%;
 width: 24px;
    height: 24px;
   font-size: 14px;
    line-height: 26px;
  cursor: default;
}

При помощи позиционирования мы помещаем подсказку в нужное нам место, а также задаем стили для визуализации и общие стили для внутренних элементов.

.help-tip:before{
 content: "?";
 font-weight: bold;
  color: #fff;
}

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

.help-tip p{
   display: none;
  text-align: left;
   background-color: #1e2021;
  padding: 20px;
  width: 300px;
   position: absolute;
 border-radius: 3px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 right: -4px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

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

.help-tip:hover p{
   display: block;
 transform-origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
 animation: fadeIn 0.3s ease-in-out;
}

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

.help-tip p:before{
 position: absolute;
 content: "";
  width: 0;
   height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1e2021;
   right: 10px;
    top: -12px;
}

И завершающая часть - это добавление стрелочки.

Обещал три, а сделали вроде, как только одну – метод универсален, в обертку можно класть все что угодно, даже солидный кусок HTML кода, если, конечно, изрядно попотеть с подгонкой стилей:

<div class="help-tip">
  <p>
       Это подсказка с <b>HTML кодом!</b>
      <a href="https://falbar.one/">и ссылками!</a>
       Вы сможете сделать
      <i><strike>намного больше</strike></i>!
 </p>
</div>

Для картинки:

<div class="help-tip">
    <p>
       Это подсказка с картинкой внутри!
       <br>
      <br>
      <img width="300" src="balloon.jpg" />
 </p>
</div>

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

#Всплывающие подсказки
10 580
Антон Кулешов
Реализуем всплывающие сообщения без использования JavaScript Всплывающие подсказки balloon CSS Всплывающие окна alertify jQuery end Page Box для всплывающих сообщений Подписываем фотографии
Комментарии не найдены

Будильник на компьютер – встаём однозначно

Кнопки для сайта одним набором

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание