В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект.
В этом нам поможет jQuery.
С самого начала документа подключаем фреймворк:
<script src="jquery.tools.min.js"></script>
Далее подключаем стили оформления. Как Вы видите - они находятся во внешнем файле:
<link rel="stylesheet" type="text/css" href="tooltip.css"/>
В теле документа нам понадобится следующий код:
<a href="#" id="trigger">
Move the mouse over this box to see the tooltip in action.
</a>
<!-- tooltip element -->
<div class="tooltip">
<h3>The Tooltip</h3>
<p>
<strong>A great tool for designing better layouts and more intuitive user-interfaces.</strong>
</p>
<p>
Tooltips can contain any HTML such as links, images, forms and tables.
This tooltip is vertically centered on the top edge of the trigger element.
</p>
</div>
Класс "trigger" - это видимый объект на странице, а "tooltip" - это то, что должно появится при наведении мышки.
После этого кода нам необходимо инициализировать функцию.
<script>
$.tools.addTipEffect("slidedown",
// opening animation
function() {
var opacity = this.getConf().opacity;
this.getTip().css({opacity:0}).animate({top: '+=15', opacity:opacity}, 300).show();
},
// closing animation
function() {
this.getTip().animate({top: '+=15', opacity:0}, 300, function() {
$(this).hide().animate({top: '+=30'}, 0);
});
}
);
$("#trigger").tooltip({effect: 'slidedown'});
</script>
Все готово! Оставайтесь с нами!