Главная » Файлы » jQuery скрипты | jQuery снипепеты | jQuery плагины


Установка

Код скрипта выглядит следующим образом:

Code
(function($){
$(function() {

  $('span.jQtooltip').each(function() {
  var title = $(this).attr('title');
  if (title && title != '') {
  $(this).attr('title', '').append('<div>' + title + '</div>');
  var width = $(this).find('div').width();
  var height = $(this).find('div').height();
  $(this).hover(
  function() {
  $(this).find('div')
  .clearQueue()
  .animate({width: width + 20, height: height + 20}, 200).show(200)
  .animate({width: width, height: height}, 200);
  },
  function() {
  $(this).find('div')
  .animate({width: width + 20, height: height + 20}, 150)
  .animate({width: 'hide', height: 'hide'}, 150);
  }
  )
  }
  })

})
})(jQuery)


Сохраните его в файл с расширением .js, например, scripts.js и подключите к сайту перед тегом , не забыв одновременно подключить и фреймворк jQuery, если это еще не сделано. Т.е. в html-код сайта добавляется такой код:

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ПУТЬ_ДО_ФАЙЛА_НА_ВАШЕМ_САЙТЕ/scripts.js"></script>


Далее нужно добавить в CSS-файл вашего сайта следующие стили:

Code
.jQtooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted;
}
.jQtooltip div {
  display: none;
  position: absolute;
  bottom: -1px;
  left: -1px;
  z-index: 1000;
  width: 190px;
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  color: #000;
  box-shadow: 0 1px 3px #C4C4C4;
  border: 1px solid #DBB779;
  background: #FFF6BD;
  border-radius: 2px;
}


Теперь осталось поместить необходимый текст в тег с классом jQtooltip и атрибутом title, т.е. вот так:

Code
<span class="jQtooltip" title="текст всплывающей подсказки">текст</span>


DEMO





Ваша оценка:

Рейтинг: 1.0 Всего:1 Добавил: Михалыч

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Комментарии
Всего комментариев: 0