В этом уроке мы создадим подсказки на jQuery для ссылок.
Шаг 1.
Подключим скачанные скрипты, прописав их между тегами <head>
<script type="text/javascript" src="example/jQuery.js"></script>
<script type="text/javascript" src="example/qtip.js"></script>
После всего контента страницы (или перед закрывающимся тегом </body>) вставим следующий скрипт:
<script type="text/javascript">
$(document).ready(function()
{
$('a[title]').qtip({
position: {
corner: {
target: 'bottomRight',
tooltip: 'topLeft'
}
},
style: {
name: 'blue',
padding: '7px 13px',
width: {
max: 200,
min: 0
},
tip: true
}
});
});
</script>
Шаг 2.
В зависимости от того, какой цвет подсказок мы хотим видеть на странице, исправим параметр name в этом скрипте.
Если вам эти цвета не подходят, их можно поменять, найдя соответствующий стиль в файле скрипта qtip.js и исправив цвета на свои.
Вот пример стиля "Dark":
dark: {
border: {
width: 3,
radius: 0,
color: '#303030'
},
title: {
background: '#404040',
color: '#f3f3f3'
},
background: '#505050',
color: '#f3f3f3',
classes: { tooltip: 'qtip-dark' }
}
Чтобы поменять положение носика (уголка) подсказки, в шаге №1 нам нужно исправить параметр tooltip.
Чтобы обозначить место появления подсказки относительно объекта, поменяем значение target. Оно может принимать те же значения, что и уголок.
Шаг 3.
В том месте, где мы хотим видеть подсказку, добавим ссылке элемент title.
Например:
<a href="http://ruseller.com/" title="Пример всплывающей подсказки">Наведите курсор сюда</a>
если же ссылкой будет картинка, то код будет такой:
<a href="http://ruseller.com/" target="_blank" title="Привет!" ><img src="friend.jpg" width="90" height="68" />
Вот и все! Удачного использования подсказок!