Как создать красивую всплывающую подсказку с помощью jQuery
В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект. В этом нам поможет jQuery.
С самого начала документа подключаем фреймворк:
-
Code
<script src="jquery.tools.min.js"></script>
-
Далее подключаем стили оформления. Как Вы видите - они находятся во внешнем файле:
-
Code
<link rel="stylesheet" type="text/css" href="tooltip.css"/>
-
В теле документа нам понадобится следующий код:
-
Code
<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" - это то, что должно появится при наведении мышки.
После этого кода нам необходимо инициализировать функцию.
-
Code
<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);
});
}
);
Добавлено (2010-11-21, 1:05 PM)
---------------------------------------------
Добавлено (2010-11-21, 1:12 PM)
---------------------------------------------