Красивые CSS подсказки для BLOGGER (5 вариантов)

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

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

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

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

<h1>
ЧТО ТАКОЕ</h1>
<ul>
<li class="tooltip swing" data-title="Сандвичами принято называть закрытые бутерброды ">Сендвич
  </li>
<li class="tooltip swing" data-title="Это один из видов грузинских хачапури">Ачма
</li>
<li class="tooltip swing" data-title="Башкирские национальное блюдо ">Чак-чак
</li>
</ul>
<style>
.tooltip {
  position: relative;
}
.tooltip:before,
.tooltip:after {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.tooltip:after {
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0,0,0,.75);
  border-left: 6px solid transparent;
  content: '';
  height: 0;
    top: 20px;
    left: 20px;
  width: 0;
}
.tooltip:before {
  background: rgba(0,0,0,.75);
  border-radius: 2px;
  color: #fff;
  content: attr(data-title);
  font-size: 14px;
  padding: 6px 10px;
    top: 26px;
  white-space: nowrap;
}


/* стили покачивания подсказки */
.tooltip.swing:before,
.tooltip.swing:after {
  transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg);
  transform-origin: 0 0;
  transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:after {
  transform: translate3d(0,60px,0);
  transition: transform .15s ease-in-out, opacity .2s;
}
.tooltip.swing:hover:before,
.tooltip.swing:hover:after {
  opacity: 1;
  transform: translate3d(0,0,0) rotate3d(1,1,1,0deg);
}

/* стили данного примера для красоты можно убрать*/
h1 {
  padding-left: 50px;
}
ul {
  margin-bottom: 40px;
}
li {
  cursor: pointer;
  display: inline-block;
  padding: 0 10px;
}</style>

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

<article class="example-article">
    <h1>
подсказка </h1>
<ol>
<li>
          <a href="http://www.shpargalochki.ru/p/blog-page.html" title="">карта</a>
          <div class="tool-tip">
<i class="tool-tip__icon">i</i>
            <br />
<div class="tool-tip__info">
<span class="info">здесь опубликованы все статьи блога</span>
           
            </div>
</div>
</li>
<li>
          <a href="http://www.shpargalochki.ru/p/blog-page.html" title="">вопрос - ответ</a>
          <div class="tool-tip">
<i class="tool-tip__icon">i</i>
            <br />
<div class="tool-tip__info">
<span class="info">здесь можно задать любой вопрос автору</span>
           
            </div>
</div>
</li>
<li>
          <a href="http://www.shpargalochki.ru/p/blog-page_34.html" title="">связь</a>
          <div class="tool-tip">
<i class="tool-tip__icon">i</i>
            <br />
<div class="tool-tip__info">
<span class="info">напишите личное сообщение автору блога</span>
           
            </div>
</div>
</li>
</ol>
</article>

<style>
.tool-tip {
  display: inline-block;
  position: relative;
  margin-left: 0.5em;
}
.tool-tip .tool-tip__icon {
  background: #27b1f0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  font-style: italic;
  font-family: times new roman;
  height: 20px;
  line-height: 1.3em;
  text-align: center;
  width: 20px;
}
.tool-tip .tool-tip__info {
  display: none;
  background: #FA8072;
  border: 1px solid #27b1f0;
  border-radius: 3px;
  font-size: 0.875em;
  padding: 1em;
  position: absolute;
  left: 30px;
  top: -20px;
  width: 250px;
  z-index: 2;
}
.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #27b1f0;
}
.tool-tip .tool-tip__info:after {
  left: -8px;
  border-right-color: #FA8072;
}
.tool-tip .tool-tip__info .info {
  display: block;
}
.tool-tip .tool-tip__info .info__title {
  color: #fa00f3;
}
.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {
  display: inline-block;
}

a:focus + .tool-tip .tool-tip__info {
  display: inline-block;
}

/******* Стили для данного примера чтоб ярче смотрелось можно убрать *******/
body{
  background-color:#EEDD82;
  color:#ffffff;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
article{
  background:#B22222;
  border-radius: 5px;
  padding: 1em;
  margin: 1em;
}
i{
  font-style: normal;
}
a{
  color: white;
  text-decoration: none;
}
a:hover,
a:focus{
  text-decoration: underline;
}
li{
  margin: 5px 0;
}</style>

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

<style>.qtip {
  display: inline-block;
  position: relative;
  cursor: pointer;
  color: #3bb4e5;
  border-bottom: 0.05em dotted #3bb4e5;
  box-sizing: border-box;
  font-style: normal;
  transition:all .25s ease-in-out
}
.qtip:hover {color:#069;border-bottom:0.05em dotted #069}

/*стили подсказки*/

.qtip:before {
  content: attr(data-tip);
  font-size: 14px;
  position: absolute;
  background: rgba(10, 20, 30, 0.85);
  color: #fff;
  line-height: 1.2em;
  padding: 0.5em;
  font-style: normal;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  min-width: 120px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  font-family: sans-serif;
  letter-spacing: 0;
  font-weight: 600
}
.qtip:after {
  width: 0;
  height: 0;
  border-style: solid;
  content: '';
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out
}
.qtip:hover:before,
.qtip:hover:after {
  visibility: visible;
  opacity: 1
}
/*сверху*/

.qtip.tip-top:before {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 8px));
  box-sizing: border-box;
  border-radius: 3px;
}
.qtip.tip-top:after {
  border-width: 8px 8px 0 8px;
  border-color: rgba(10, 20, 30, 0.85) transparent transparent transparent;
  top: -8px;
  left: 50%;
  transform: translate(-50%, 0);
}
/*снизу*/
.qtip.tip-bottom:before {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 8px));
  box-sizing: border-box;
  border-radius: 3px;
}
.qtip.tip-bottom:after {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent rgba(10, 20, 30, 0.85) transparent;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, 0);
}
/*слева*/
.qtip.tip-left:before {
  left: 0;
  top: 50%;
  transform: translate(calc(-100% - 8px), -50%);
  box-sizing: border-box;
  border-radius: 3px;
}
.qtip.tip-left:after {
  border-width: 8px 0 8px 8px;
  border-color: transparent transparent transparent rgba(10, 20, 30, 0.85);
  left: -8px;
  top: 50%;
  transform: translate(0, -50%);
}
/*справа*/
.qtip.tip-right:before {
  right: 0;
  top: 50%;
  transform: translate(calc(100% + 8px), -50%);
  box-sizing: border-box;
  border-radius: 3px;
}
.qtip.tip-right:after {
  border-width: 8px 8px 8px 0;
  border-color: transparent rgba(10, 20, 30, 0.85) transparent transparent;
  right: -8px;
  top: 50%;
  transform: translate(0, -50%);
}
/*это просто стили для данного примера можно убрать*/

body {
  background: #3bb4e5
}
.container {
  padding: 1.5em;
  margin: 3em auto;
  background: #fff;
  position: relative;
  max-width: 720px;
  font-size: calc(2vmin + 12px);
  line-height: 1.5em;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  font-weight: 500;
  text-align:center;
  font-family:'Raleway', sans-serif
}
.container p {margin:0 auto 0.8em}
.container h1 {
  text-align: center;font-family: monospace, serif;
  line-height:1em;
  color: #d40;
  margin:0 auto 0.5em;
  font-size: 2.5em;
}
</style>

<br />
<div class="container">
<h1>
Вот такие <i class="qtip tip-top" data-tip="Несколько вариантов простых подсказок">подсказки</i></h1>
Подсказки помогут вашим читателя-  <i class="qtip tip-top" data-tip="всплывает сверху!">вот такая</i>.<br />
 или такая <i class="qtip tip-right" data-tip="всплывает справа">подсказка</i>, <br />
<i class="qtip tip-left" data-tip="появляется слева">ещё одна</i> такая
</div>

4. Всплывающие снизу "тултипчики" с иконками. Легко можно подобрать другие. Вы можете скопировать этот CSS для работы с любым элементом страницы, который может поддерживать всплывающую подсказку на основе информации.
<h2>Ещё примеры подсказок  на CSS!</h2>

<p>Наведите курсор мыши на надписи чтобы увидеть:

<a class="tooltip" href="http://www.shpargalochki.ru">классическую подсказку<span class="classic">Это просто классическая подсказка CSS!</span></a>,

<a class="tooltip" href="http://www.shpargalochki.ru">критическое сообщение<span class="custom critical"><img src="http://s1.iconbird.com/ico/2013/6/355/w128h1281372334742delete.png" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Это просто подсказка с иконкой о критическом сообщении с использованием CSS!</span></a>,

<a class="tooltip" href="http://www.shpargalochki.ru">помощь<span class="custom help"><img src="http://www.iconsearch.ru/uploads/icons/snowish/128x128/gnome-help.png" alt="Помощь" height="48" width="48" /><em>Помощь</em>Это просто подсказка о помощи с использованием CSS!</span></a>,

<a class="tooltip" href="http://www.shpargalochki.ru">информация<span class="custom info"><img src="http://s1.iconbird.com/ico/2013/6/304/w128h1281371731196supermono3dpart257.png" alt="Информация" <article class="example-article">

 

<style>

.tool-tip {

  display: inline-block;

  position: relative;

  margin-left: 0.5em;

}

.tool-tip .tool-tip__icon {

  background: #27b1f0;

  border-radius: 10px;

  cursor: pointer;

  display: inline-block;

  font-style: italic;

  font-family: times new roman;

  height: 20px;

  line-height: 1.3em;

  text-align: center;

  width: 20px;

}

.tool-tip .tool-tip__info {

  display: none;

  background: #FA8072;

  border: 1px solid #27b1f0;

  border-radius: 3px;

  font-size: 0.875em;

  padding: 1em;

  position: absolute;

  left: 30px;

  top: -20px;

  width: 250px;

  z-index: 2;

}

.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {

  content: "";

  position: absolute;

  left: -10px;

  top: 7px;

  border-style: solid;

  border-width: 10px 10px 10px 0;

  border-color: transparent #27b1f0;

}

.tool-tip .tool-tip__info:after {

  left: -8px;

  border-right-color: #FA8072;

}

.tool-tip .tool-tip__info .info {

  display: block;

}

.tool-tip .tool-tip__info .info__title {

  color: #fa00f3;

}

.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {

  display: inline-block;

}



a:focus + .tool-tip .tool-tip__info {

  display: inline-block;

}



/******* Стили для данного примера чтоб ярче смотрелось можно убрать *******/

body{

  background-color:#EEDD82;

  color:#ffffff;

  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

}

article{

  background:#B22222;

  border-radius: 5px;

  padding: 1em;

  margin: 1em;

}

i{

  font-style: normal;

}

a{

  color: white;

  text-decoration: none;

}

a:hover,

a:focus{

  text-decoration: underline;

}

li{

  margin: 5px 0;

}</style> /><em>Информация</em>Это просто подсказка о самой важной информации с использованием CSS!</span></a>

  и <a class="tooltip" href="http://www.shpargalochki.ru">предупреждение<span class="custom warning"><img src="http://www.iconsearch.ru/uploads/icons/snowish/128x128/dialog-warning.png" alt="Предупреждение" height="48" width="48" /><em>Предупреждение</em>Это просто подсказка с предупреждением с использованием CSS!</span></a>.



<style type="text/css">

.tooltip {

  border-bottom: 1px dotted #000000;

  color: #000000; outline: none;

  cursor: help; text-decoration: none;

  position: relative;

}

.tooltip span {

  margin-left: -999em;

  position: absolute;

}

.tooltip:hover span {

  font-family: Calibri, Tahoma, Geneva, sans-serif;

  position: absolute;

  left: 1em;

  top: 2em;

  z-index: 99;

  margin-left: 0;

  width: 250px;

}

.tooltip:hover img {

  border: 0;

  margin: -10px 0 0 -55px;

  float: left;

  position: absolute;

}

.tooltip:hover em {

  font-family: Candara, Tahoma, Geneva, sans-serif;

  font-size: 1.2em;

  font-weight: bold;

  display: block;

  padding: 0.2em 0 0.6em 0;

}

.classic { padding: 0.8em 1em; }

.custom { padding: 0.5em 0.8em 0.8em 2em; }

<strong>* html</strong> a:hover { background: transparent; }

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }

.critical { background: #FFCCAA; border: 1px solid #FF3334; }

.help { background: #9FDAEE; border: 1px solid #2BB0D7; }

.info { background: #9FDAEE; border: 1px solid #2BB0D7; }

.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

border-radius: 5px 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

</style>

Меняйте в коде адреса страниц на которые будет вести ссылка и текст

height="48" width="48" - размеры иконки.

Уберите за ненадобностью ненужные участки кода 

<a class="tooltip" href="http://www.shpargalochki.ru">критическое сообщение<span class="custom critical"><img src="http://s1.iconbird.com/ico/2013/6/355/w128h1281372334742delete.png" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Это просто подсказка с иконкой о критическом сообщении с использованием CSS!</span></a>

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

<style>section .center {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.button {
  position: relative;
  background: #8FBC8F;
  display: inline-block;
  height: 60px;
  width: 200px;
  border-radius: 50em;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

span,
em,
i {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
}

span {
  overflow: hidden;
}

.button em {
  top: 0;
  line-height: 60px;
}

.button i {
  top: 100%;
  line-height: 60px;
}

.button:hover em,
.button.hover em{
  top: -100%;
}

.button:hover i,
.button.hover i{
  top: 0%;
}

em,
i {
  transition: top 0.3s;
}

.button::before,
.button::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.button::before {
  content: 'Размер файла: 5mb ';
  width: 160px;
  height: 60px;
  background: #778899;
  border-radius: 0.25em;
  bottom: 90px;
  line-height: 60px;
  left: calc(50% - 80px);
  font-size: 15px;
}

.button::after {
  content: '';
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-top-color: #0E84A1;
  bottom: 70px;
  left: calc(50% - 10px);
}

.button:hover::before,
.button:hover::after,
.button.hover::before,
.button.hover::after{
  opacity: 1;
  visibility: visible;
}

.button:hover::before,
.button.hover::before{
  bottom: 80px;
}

.button:hover::after,
.button.hover::after{
  bottom: 60px;
}</style>


<br />
<br />
<section>
  <div class="center">
<h4>
скачать файл</h4>
<a class="button" href="https://draft.blogger.com/www.shpargalochki.ru/">
   
        <em>СКАЧАТЬ</em>
        <i class="fa fa-download"></i>
   
    </a>
    <br />
<br /></div>
</section>

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

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

Получайте новые сообщения с блога прямо на почту

Введите Ваш email