В этом уроке я расскажу о еще одном виде подсказок на jQuery.
Здесь в качестве подсказки может быть текст, картинка, список и др. В создании таких подсказок нам поможет плагин для jQuery, который называется Easy Tooltip 1.0
Шаг 1.
Подключим фреймворк jQuery и плагин Easy Tooltip 1.0 к нашему документу, прописав следующий код между тегами <head>:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tooltip.js"></script>
Шаг 2.
Далее пропишем следующий скрипт:
<script type="text/javascript">
$(document).ready(function(){
$("a#link").easyTooltip({
useElement: "item"
});
});
</script>
Шаг 3.
В отдельный CSS-файл или между тегами <head> пропишем стили, отвечающие за внешний вид подсказок. Вы можете отредактировать эти стили по своему желанию.
#easyTooltip{
margin:0 10px 1em 0;
width:250px;
padding:8px;
background:#fcfcfc;
border:1px solid #e1e1e1;
line-height:130%;
}
#easyTooltip h3{
margin:0 0 .5em 0;
font:13px Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#easyTooltip p{
margin:0 0 .5em 0;
}
#easyTooltip img{
background:#fff;
padding:1px;
border:1px solid #e1e1e1;
float:left;
margin-right:10px;
}
#item{display:none;}
В нужном нам месте на странице пропишем ссылку и дадим ей идентификатор link. Например:
Наведите мышкой <a href="http://ruseller.com/" id="link">сюда</a>
Создадим блок с идентификатором item, в который впишем текст непосредственно самой подсказки (по желанию сюда можно вставить картинку, список, или что то еще). Т.е. у Вас должно получиться примерно так:
<div id="item">
<h3>Ruseller.com</h3>
<img src="image.gif" />
<p>Текст</p>
</div>
Вот и все! Оригинальные и функциональные подсказки для ссылок готовы!