Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Всплывающие подсказки для внутренних тегов title в стиле Facebook

Дата добавления: 17.01.2014 - 03:06
Добавил: Buger
Количество просмотров: 1285
Количество комментариев: 0
Размер файла: 3.1Kb
Рейтинг материала: 5.0 / 4
Всплывающие подсказки для внутренних тегов title в стиле Facebook
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 4
JQuery Tipsy - это всплывающие подсказки для внутренних тегов title в стиле Facebook.

1. Как использовать библиотеку правильно?
скачиваем саму библиотеку.

2. В архиве есть jquery.tipsy.js и в папке img файл tipsy.gif
- jquery.tipsy.js - сама библиотека JQuery
- 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});
});

P.S.: данный код позволяет использовать в контейнере title теперь и HTML
например:
Код
<div title="<b>Привет,</b> чувак =)">ТЕСТ</div>

Полную документацию по использованию вы можете узнать на официальном сайте данной библиотеки.
Обязательно нужно чтобы была подключена JQuery не ниже версии 1.6 (uCoz на данный момент имеет JQuery версию 1.7.2), что естественно подходит для установки.

4. Нам остается прописать в ваш файл стилей (CSS) нижеуказанный код и настроить под ваш дизайн. Вставить можно его в самый низ вашего css файла
Код
/*
------------ всплывающие подсказки ---------------*/
.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;
}

На этом все! Всем спасибо )))


Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.