JQuery Tipsy - это всплывающие подсказки для внутренних тегов title в стиле Facebook
1. Как использовать библиотеку правильно?
скачиваем саму библиотеку:Внимание! У вас нет прав для просмотра скрытого текста.
2. В архиве есть jquery.tipsy.js и в папке img файл tipsy.gif
+ jquery.tipsy.js - сама библиотека
+ tipsy.gif - картинка которая отображает прозрачную подсказку.
3. Создадим файл core.js или напишем туда
$(function() {
$('.northwest').tipsy({gravity: 'nw', fade: true, html: true});
$('.north').tipsy({gravity: 'n', fade: true, html: true});
$('.northeast').tipsy({gravity: 'ne', fade: true, html: true});
$('.south').tipsy({gravity: 's', fade: true, html: true});
$('.southwest').tipsy({gravity: 'sw', fade: true, html: true});
$('.southeast').tipsy({gravity: 'se', fade: true, html: true});
$('.east').tipsy({gravity: 'e', fade: true, html: true});
$('.west').tipsy({gravity: 'w', fade: true, html: true});
$('html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td').tipsy({live: true, fade: true, html: true});
});
ЗЫ: данный код позволяет использовать в контейнере title теперь и HTML
например:<div title="<b>Привет,</b> чувак =)">ТЕСТ</div>
полную документация по использованию вы можете узнать на официальном сайте данной библиотеке.
обязательно нужно чтобы была подключена JQuery не ниже версии 1.6
4. Пропишем в ваш файл стилей CSS3 код:
.tipsy {
padding: 5px;
font-size: 10px;
position: absolute;
z-index: 100000;
}
.tipsy-inner {
padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
font: 11px/18px Arial, Tahoma, Vergana, sans-serif;
font-weight: normal;
}
.tipsy-inner {
border-radius: 3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.tipsy-arrow {
position: absolute;
background: url('img/tipsy.gif') no-repeat top left;
width: 9px;
height: 5px;
}
.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}
.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}
.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;
}