Tipsy Tooltip Plugin всплывающей подсказки

Тултип (tooltip) - это маленькая всплывающая подсказка, которая порой играет очень большую роль в дизайне сайта. Если тултип на вашем сайте сделан качественно и выглядит привлекательно, он наверняка поспособствует наилучшему восприятию сайта посетителями и повысит его юзабилити.

Итак, думаю, пора представить вам подборку наиболее качественных jQuery тултип-плагинов. По мере обнаружения новых достойных внимания примеров, я буду добавлять их в коллекцию

Установка: 

Вставить код после HEAD

Code
<script type="text/javascript" src="/js//jquery.tipsy.js"></script>  
<script>  
$(function() {  
$('.north').tipsy({gravity: 'n'});  
$('.south').tipsy({gravity: 's'});  
$('.east').tipsy({gravity: 'e'});  
$('.west').tipsy({gravity: 'w'});  
});  
</script>

CSS-Code 

Теперь в css стилях пропишем:
- изображение уголка
- установим прозрачность,
- выравним текст по центру
- установим значения для текста
- пропишем закруглённые углы

Code
.tipsy {  
  padding: 5px;  
  font-size: 11px;  
  opacity: 0.8;  
  filter: alpha(opacity=80);  
  background-repeat: no-repeat;  
  background-image: url('tipsy.gif');  
}  

.tipsy-inner {  
  padding: 5px 8px 4px 8px;  
  background-color: black;  
  color: white;  
  max-width: 200px;  
  text-align: center;  
}  

.tipsy-inner {  
  -moz-border-radius:3px;  
  -webkit-border-radius:3px;  
}  

.tipsy-north {  
  background-position: top center;  
}  

.tipsy-south {  
  background-position: bottom center;  
}  

.tipsy-east {  
  background-position: right center;  
}  

.tipsy-west {  
background-position: left center;  
}

Html

Теперь в начало нашей ссылки, нам следует прописать класс, который будет отвечать за появление подсказки с той стороны, которая нам необходима. (север, юг,восток, запад).
ссылки с подсказкой выглядят так;

Code
<a class='north' href='#' title='Подсказка появляется снизу (Север)'>North | Север</a>  
<a class='south' href='#' title='Подсказка появляется сверху (Юг)'>South | Юг</a>  
<a class='east' href='#' title='Подсказка появляется слева (Восток)'>East | Восток</a>  
<a class='west' href='#' title='Подсказка появляется справа (Запад)'>West | Запад</a>

Вот и всё, на мой взгляд самый большой плюс данного плагина заключается в том, что благодаря css стилям, мы можем его настроить на своё усмотрение, плюс нам не надо прописывать как это принято дополнительный тег , в котором находиться текст подсказки, в данном решении используется текст параметра title, даже при большом количестве текста, подсказка смотрится как надо .

  • FalleN

  • 2740

  • 1

  • 240
Теги: Tipsy, Tooltip, plugin

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!