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

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

19.11.2015

873

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

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


/* Подсказка */
Инструкция к подсказке для того чтобы что-то сделать. Надо навести курсор в центр вопроса и вы получите ссылку на ресурс.
/* Всплывающие описание на изображении */

.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: 0px;
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(52, 106, 223);
width: 14px;
height: 14px;
margin-left: 5px;
text-align: center;
border-radius: 50px;
}

.tooltip .fa { margin:0 !important;}

.tooltip > span {
position: absolute;
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(255, 255, 145);
color: #000;
}
  
.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;
  }
}
  • Комментарии
  • Вложения

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

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

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