Всплывающие подсказки могут принимать различные формы. Рассмотрим некоторые из распространенных вариантов подсказок.
 | Какой-либо текст требующий пояснения. | Построен 2400 лет до НЭИнструкция к подсказке для того чтобы что-то сделать. Надо навести курсор в центр вопроса и вы получите ссылку на ресурс. | |
 | |||
 | |||
 | Основан в 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>Примеры
/* Картинка */
