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

5201

В этой статье рассмотрим, как при помощи javascript сделать всплывающие подсказки при наведении на какой - либо элемент или блок.

Для примера создадим точку с классом dot, при наведении на которую будет появляться подсказка (tooltipe)

<div class="block">
<div class="dot"></div>
<div class="tooltipe">подсказка</div>
</div>

Зададим стили для точки и подсказки:

.dot {
position:absolute;
background:red;
color:#fff;
width:35px;
height:35px;
border-radius:100px;
z-index:99
left: 20%;
top: 30%;
border: 3px solid #fff;
}

.block {
width:100%;
height:300px;
background:#d9d4cd;
position:relative
}

.tooltipe {
position:absolute;
top:19%;
max-width: 420px;
text-align:center;
background: white;
font-weight:600;
font-size:13px;
left: 20%;
padding: 5px 20px;
color: black;
border-radius: 10px;
z-index:999
}

Далее понадобится простенький скрипт, который будет отображать нашу подсказку при наведении на точку, для чего используем события mouseenter и mouseleave.

<script>
jQuery(function($) {
$('.tooltipe').hide();
$('.dot').on('mouseenter', function() {
$('.tooltipe').show(600);
}).on('mouseleave', function() {
$('.tooltipe').hide(600);
});
})
</script>

Демо:

подсказка

На этом все. Надеюсь, что статья была вам полезной!

Поддержать проект:

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

Ваш адрес email не будет опубликован.

*
code