всплывающая подсказка на jquery

Всплывающая подсказка при наведение на элемент на CSS и jQuery

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

Для начала давайте подключим jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

После этого нам нужно загрузить файл, который находится здесь – https://github.com/nathco/jQuery.mousetip

Или скопировать вот этот код и добавить его в отдельный JavaScript файл.

$.fn.mousetip = function(tip, x, y) {
var $this = $(this);
$this.hover(function() {
$(tip, this).show();
}, function() {
$(tip, this).hide().removeAttr('style');
}).mousemove(function(e) {
var mouseX = e.pageX + (x || 10);
var mouseY = e.pageY + (y || 10);
$(tip, this).show().css({
top:mouseY, left:mouseX
});
});
};

После того как вы подключили файл со скриптом и библиотеку jQuery, нужно подключить стили.

<style>
span.tip {
/* Required */
position: absolute; //позиция
z-index: 100; //номер слоя по оси z
display: none;

/* Optional */
font-size: 15px; //размер шрифта
max-width: 150px; //максимальная ширина всплывающей подсказки
height: auto; //высота подсказки
padding: 10px; //внутренний отступ
border-radius: 3px; //закругление краёв
box-shadow: 0 1px 2px #666; //тень блока
background: #FD0; //цвет заднего фона
}
</style>

Стили вы можете задавать под себя, это только примерные настройки.

Теперь давайте добавим наши элементы, при наведение на которые будет появляться подсказка и сами подсказки. Элементы с классом tip хранят в себе текст который будет появляться при наведение на изображение.

<div>
<img src="a.png" alt="">
<span class="tip">Здесь девушка что-то печатает</span>
</div>
<div>
<img src="fotorama_io.jpg" alt="">
<span class="tip">А это изображение было на Prog-Time, в записи про слайдер </span>
</div>

И чтобы у нас все заработало нужно добавить последний, маленький скрипт, который нужно разместить в самом низу.

<script>
$(function() {
/*здесь мы указываем что при наведение на div появляется подсказка, которая задается элементом с кассом tip*/
$('div').mousetip('.tip');

/*здесь мы указываем что подсказка будет находиться на 20px вправо и на 30 px вниз от курсора*/
$('div').mousetip('.tip', 20, 30);
});
</script>

Вот что у нас получилось!

Прошлая превьюшечка
А это просто картинка
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о