• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

jQuery : Всплывающие подсказки, плагин TipTip

​Если Вам надоели стандартные всплывающие подсказки, то эта статья для Вас! Плагин, который мы рассмотрим называется TipTip, чтобы скачать перейдите по следующей ссылке.

  1. Главная
  2. Все про JS : jQuery, Node, AngularJS

Если Вам надоели стандартные всплывающие подсказки, то эта статья для Вас! Плагин, который мы рассмотрим называется TipTip, чтобы скачать перейдите по следующей ссылке. C его помощью можно взять под контроль всплывающие подсказки на сайте и настроить их на свой вкус. У этого легковесного плагина (размер 7кб) также есть несколько параметров. Для его работы необходима библиотека jQuery, стили для подсказки ну и сам скрипт.

Подключение плагина

Для начала следует подключить все необходимое для работы плагина.

<!-- библиотека jquery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- непосредственно сам скрипт плагина -->
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- А также стили CSS, для оформления подсказки -->
<link href="tipTip.css" rel="stylesheet" type="text/css"><br>

Всплывающие подсказки построены на блоках DIV. И имеют следующую структуру:

<div id="tiptip_holder">
    <div id="tiptip_content">
        <div id="tiptip_arrow">
            <div id="tiptip_arrow_inner"></div>
        </div>
    </div>
</div><br>

Использование

Нужно указать класс или идентификатор:

Где-то за <a href="#" class="tip" title="Это всплывающая подсказка!">словесными
горами</a> в стране гласных и согласных.
<img src="image.jpg" class="tip" title="А это картинка!">
<!-- Теперь нужно добавить код инициализации плагина:-->
<script type="text/javascript">
$(document).ready(function() {
   $(".tip").tipTip({maxWidth: "auto", defaultPosition: "top"});
});
</script><br>

C помощью jQuery селектора выбираем все элементы с классом (.top) и вызываем метод tipTip с параметрами (maxWidth и defaultPosition).

Скачать исходники Tip Tip с примером

Классы можно комбинировать:

$(".tip, .tip2").tipTip();

Параметры

  • activation: строка («hover» по-умолчанию) — при каком событии появляется подсказка. Доступны: «hover», «focus» и «click»;
  • keepAlive: true или false (false по-умолчанию) — если установить true тогда подсказка не исчезнет пока на нее не наведут курсор;
  • maxWidth: строка («200px» по-умолчанию) — максимальная ширина подсказки, этот параметр может принимать значение «auto»;
  • edgeOffset: число (3 по-умолчанию) — расстояние в пикселях от ссылки до подсказки;
  • defaultPosition: строка («bottom» по-умолчанию) — положение подсказки относительно ссылки. Доступны: «top», «bottom», «left» и «right»;
  • delay: число (400 по-умолчанию) — количество миллисекунд задержки перед показом подсказки;
  • fadeIn: число (200 по-умолчанию) — скорость появления подсказки в миллисекундах;
  • fadeOut: число (200 по-умолчанию) — скорость исчезновения подсказки в миллисекундах;
  • attribute: строка («title» по-умолчанию) — атрибут HTML, содержимое которого отобразится в подсказке;
  • content: true или false (false по-умолчанию) — HTML или текст будет выбран в качестве контента для подсказки;
  • enter: функция обратного вызова — пользовательская функция, которая выполняется всякий раз при наведении курсора мыши на ссылку.
  • exit: функция обратного вызова — пользовательская функция, которая выполняется всякий раз, когда убирается курсор от ссылки.

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©