16 янв 2014
JQuery Tipsy v 1.0.0
SibWeb Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно JQuery Tipsy v 1.0.0

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
JQuery Tipsy v 1.0.0

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;
}









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.