Главная » Шпаргалка » PHP MYSQL javascript » jQuery » красивую всплывающую подсказку

Как создать красивую всплывающую подсказку с помощью jQuery

http://www.ruseller.com/lessons/les282/example/index.html

В данном уроке Вы узнаете как сделать красивую подсказку при наведении на любой объект.

В этом нам поможет 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>