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

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

25 июня 2015 6892 0

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

Реклама

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

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

И так, давайте притупим и начнём 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="http://falbar.ru/">и ссылками!</a>
       Вы сможете сделать
      <i><strike>намного больше</strike></i>!
 </p>
</div>

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

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

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

Реклама
Комментариев еще не оставлено
no_avatar