Главная » 2013 » Декабрь » 4 » Красивые всплывающие подсказки jQuery
01:17:51
Красивые всплывающие подсказки jQuery

Если хотите как-то сделать сайт отличным от других, то замените обычные всплывающие подсказки на эти, более яркие и красивые подсказки. При наведении на текст, подсказка появляется плавно. Есть два варианта: 1) Подсказка появляется от вашего текста, 2) Подсказка появляется от восклицательного знака, заключённого в квадратик.

На все страницы сайта, где будет работать данная подсказка перед тэгом [ss]/head[/ss] ставим:
Код
<script type="text/javascript">
  $('span.jQtooltip').each(function() {  
  var el = $(this);  
  var title = el.attr('title');  
  if (title && title != '') {  
  el.attr('title', '').append('<div>' + title + '</div>');  
  var width = el.find('div').width();  
  var height = el.find('div').height();  
  el.hover(  
  function() {  
  el.find('div')  
  .clearQueue()  
  .delay(200)  
  .animate({width: width + 20, height: height + 20}, 200).show(200)  
  .animate({width: width, height: height}, 200);  
  },  
  function() {  
  el.find('div')  
  .animate({width: width + 20, height: height + 20}, 150)  
  .animate({width: 'hide', height: 'hide'}, 150);  
  }  
  ).mouseleave(function() {  
  if (el.children().is(':hidden')) el.find('div').clearQueue();  
  });  
  }  
  }) </script>


Затем в CSS вашего сайта ставим:
Код
.jQtooltip {position:relative;cursor:help;border-bottom:1px dotted;}
.jQtooltip div {display;none;position: absolute;bottombottom:-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.mini {display:inline-block;vertical-align:bottom;font-size:11px;width:14px;line-height:13px;text-align:center;margin-left:2px;top:-2px;color:#9A4D18;border:1px solid #FAD28F;background:#FFF6BD;border-radius:2px;}

Если хотите, чтобы подсказка появлялась, как на первом варианте, чтобы подсказка появлялась от какого то слова, ставим код и меняем слова на свои
Код
<span class="jQtooltip" title="текст всплывающей подсказки">Текст</span>

Если хотите второй вариант, когда подсказка всплывает от ! знака в квадратике, то используем следующий код:
Код
<span class="jQtooltip mini" title="текст всплывающей подсказки">!</span>
Скрипты для uCoz | Просмотров: 2570 | Добавил: RAIDER
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]