Сегодня я вам покажу как добавить всплывающую подсказку, которая будет появляться при наведение на элемент. В качестве элемента может быть выбран любой блок. Для этого мы будем использовать уже готовое решение на 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>
Вот что у нас получилось!
