/ Сайтостроение / Дизайн / Всплывающие подсказки CSS

Всплывающие подсказки CSS

HIT

19.11.2015

1092

Всплывающие подсказки могут принимать различные формы. Рассмотрим некоторые из распространенных вариантов подсказок.

rimskie-kolonnu-xramovogo-kompleksa-v-dendere
Какой-либо текст требующий пояснения. Построен 2400 лет до НЭИнструкция к подсказке для того чтобы что-то сделать. Надо навести курсор в центр вопроса и вы получите ссылку на ресурс.
Lake-in-Bavaria
   
1293079
   
slidemodif1
  Основан в 1723 годуИнструкция к подсказке для того чтобы что-то сделать. Надо навести курсор в центр вопроса и вы получите ссылку на ресурс.

CSS разных подсказок

/* Всплывающая подсказка над словом */
.jQtooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted;
}
.jQtooltip div {
  display: none;
  position: absolute;
  bottom: -1px;
  left: -1px;
  z-index: 999;
  width: 190px;
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  color: #000;
  box-shadow: 0 1px 3px #C4C4C4;
  border: 1px solid #DBB779;
  background: #FFF6BD;
  border-radius: 2px;
}

/* Всплывающие описание на изображении */
.photo-d {display: inline-block; position: relative;}

.photo-d img {float: left;}

.photo-d::after {
content: attr(data-title);
position: absolute;
left: 0;
right: 0;
bottom: 2px;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
font-size: 11px;
padding: 10px 10px;  
opacity: 0;
-webkit-transition: opacity 0.3s linear;
 transition: opacity 0.3s linear;  
}
.photo-d:hover::after {opacity: 1;}

/* Всплывающая подсказка над кнопкой */
.tooltip {
display: inline-block;
position: relative;
text-indent: 0px;
cursor: help;
background-color: rgb(176, 211, 255);
width: 14px;
height: 14px;
margin-left: 5px;
text-align: center;
border-radius: 50px;
}
.tooltip .fa { margin:0 !important;}
.tooltip > span {
	position: absolute;
    z-index: 99;
    font-size: 12px;
    bottom: 100%;
    left: -20em;
    right: -20em;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    max-width: 20em;
    max-height: 80vh;
    visibility: hidden;
    margin: 0 auto 6px auto;
    padding: 2px 5px 4px 5px;
    border: 1px solid #fff;
    background: rgb(249, 243, 179);
    color: #000;
    border-radius: 5px;
}
.tooltip.left > span { /* начинается от левого края */
  left: 0;
  right: -20em;
  margin: 0 0 .4em;
}
.tooltip.right > span { /* начинается от правого края */
  left: -20em;
  right: 0;
  margin: 0 0 .4em auto;
}
.tooltip:after { /* треугольничек под подсказкой; тут тоже везде .4em */
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  visibility: hidden;
  margin: 0 0 0 -.4em;
  border: .4em solid;
  border-color: rgb(255,255,255) transparent transparent transparent;
  cursor: auto;
}
.tooltip.left:after {  left: 1em;}
.tooltip.right:after {
  left: auto;
  right: .6em; /* 1em - .4em */
}
.tooltip:before {
  content: "";
  position: absolute;
  top: -.4em;
  left: 0;
  right: 0;
  height: .4em;
  visibility: hidden;
}
.tooltip:hover > span,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus > span,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  transition: 0s .4s;
}
.tooltip:focus { /* убрать рамку в Хроме */
  outline: none;
}
.tooltip.anim > span,
.tooltip.anim:after { /* анимация */
  opacity: 0;
  transform: translateY(1.5em) scale(.3);
  transform-origin: center bottom;
}
.tooltip.anim:after {
  transform: translateY(.7em) scale(.3); /* 1.7 = 1.5 / (1.4*2) */
}
.tooltip.anim:hover > span,
.tooltip.anim:hover:after,
.tooltip.anim:focus > span,
.tooltip.anim:focus:after {
  opacity: 1;
  transition: .6s .4s;
  transform: translateY(0);
}

@media (max-width: 20em) { /* ширина подсказки может быть не более ширины окна браузера */
  .tooltip > span {
    max-width: 100vw; /* в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует */
    box-sizing: border-box;
  }
}

Скрипты

<script>

 $(document).ready(function() {   
   
 // Всплывающие подсказки
  
        $('.hover').each(function(){
        var hover=$(this);
        hover.hide();
        $("#"+hover.attr('rel')).hover(function(){
        hover.toggle(200);
        });
		
        });
 
 }); 

// Всплывающие над словами подсказки
(function($){
$(function() {

  $('span.jQtooltip').each(function() {
    var el = $(this);
    var title = el.attr('title');
    if (title && title != '') {
      el.attr('title', '').append('<div>' + title + '</div>');
      var width = el.find('div').width();
      var height = el.find('div').height();
      el.hover(
        function() {
          el.find('div')
            .clearQueue()
            .delay(200)
            .animate({width: width + 20, height: height + 20}, 200).show(200)
            .animate({width: width, height: height}, 200);
        },
        function() {
          el.find('div')
            .animate({width: width + 20, height: height + 20}, 150)
            .animate({width: 'hide', height: 'hide'}, 150);
        }
      ).mouseleave(function() {
        if (el.children().is(':hidden')) el.find('div').clearQueue();
      });
    }
  })

})
})(jQuery)</script>

Верстка:

/* Картинка */
<div class="photo-d" data-title="Софийский собор"><img src="/wp-content/uploads/2015/11/rimskie-kolonnu-xramovogo-kompleksa-v-dendere-300x145.jpg" alt="rimskie-kolonnu-xramovogo-kompleksa-v-dendere" width="300" height="145" /></div>

/* Подсказка */
<span class="tooltip" tabindex="0"><i class="fa fa-question"></i><span>Инструкция к подсказке для того чтобы что-то сделать. Надо навести курсор в центр вопроса и вы получите <a href="http://opttour.ru/pustaya/">ссылку</a> на ресурс.</span></span>

Примеры

/* Картинка */
rimskie-kolonnu-xramovogo-kompleksa-v-dendere
/* Подсказка */ Инструкция к подсказке для того чтобы что-то сделать. Надо навести курсор в центр вопроса и вы получите ссылку на ресурс.

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Всплывающие подсказки CSS Всплывающие подсказки CSS
Подарок за покупку
Рекомендации для васПодарок за покупкуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.