Class: Tips

Відображати підказку на будь-якому елементі з заголовком і/або href.

Credits:

• Ідея за Tips.js базується на Bubble Tooltips від Alessandro Fulcitiniti

Примітка:

• Tips вимагає, щоб сторінка була в Standards Mode.

Реалізує:

• Events, Options

Tips Метод: constructor

Аргументи:

• elements - (mixed: optional) Колекція елементів, рядковий Selector, або Element для застосування підказок.
• options - (object) Об'єкт для налаштування цього екземпляра Tips.

Опції:

• showDelay - (number: defaults to 100) Затримка перед спрацюванням події show.
• hideDelay - (number: defaults to 100) Затримка перед спрацюванням події hide.
• className - (string: defaults to null) the className, який отримає ваш контейнер підказки. Корисно для екстремального стилювання.
  • Елемент підказки всередині вищезазначеного контейнера підказки матиме 'tip' як ім'я класу.
  • Заголовок матиме як ім'я класу: tip-title
  • Текст матиме як ім'я класу: tip-text
• offsets - (object: defaults to {'x': 16, 'y': 16}) Відстань вашої підказки від миші.
• fixed - (boolean: defaults to false) Якщо встановлено true, toolTip не буде слідувати за мишею.

Події:

• show: спрацьовує, коли підказка показана
• hide: спрацьовує, коли підказка ховається

Приклад:

HTML:

<a href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

JavaScript

var myTips = new Tips('.thisisatooltip');

Tips Event: show

• (function) Спрацьовує, коли Tip починає показуватися і за замовчуванням робить підказку видимою.

Сигнатура:

onShow(tip)

Аргументи:

1. tip - (element) Елемент підказки. Корисно, якщо ви хочете застосувати ефекти до нього.

Приклад:

myTips.addEvent('show', function(tip){

    tip.fade('in');
});

Tips Event: hide

• (function) Спрацьовує, коли Tip починає ховатися і за замовчуванням робить підказку прихованою.

Сигнатура:

onHide(tip)

Аргументи:

1. tip - (element) Елемент підказки. Корисно, якщо ви хочете застосувати ефекти до нього.

Приклад:

myTips.addEvent('hide', function(tip){
    tip.fade('out');

});

Tips Метод: attach

Прив'язує підказки до елементів. Корисно для додавання більше елементів до екземпляра tips.

Синтаксис:

myTips.attach(elements);

Аргументи:

1. elements - (mixed) Колекція елементів, рядковий Selector, або Element для застосування підказок.

Повертає:

• (object) Цей екземпляр Tips.

Приклад:

myTips.attach('a.thisisatip');

Tips Метод: detach

Відв'язує підказки від елементів. Корисно для видалення елементів з екземпляра tips.

Синтаксис:

myTips.detach(elements);

Аргументи:

1. elements - (mixed) Колекція елементів, рядковий Selector, або Element для застосування підказок.

Повертає:

• (object) Цей екземпляр Tips.

Приклад:

myTips.detach('a.thisisatip');

Tips HTML Structure

<div class="options.className"> //the className you pass in options will be assigned here.
    <div class="tip-top"></div> //useful for styling

 
    <div class="tip">
 
        <div class="tip-title"></div>
 
        <div class="tip-text"></div>

 
    </div>
 
    <div class="tip-bottom"></div> //useful for styling
</div>

Tips зі сховищем

Ви також можете призначати заголовки та вміст підказок через Element Storage.

Приклад:

HTML:

<a id="tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

JavaScript

$('tip1').store('tip:title', 'custom title for tip 1');

 
$('tip1').store('tip:text', 'custom text for tip 1');

Примітка:

Якщо ви використовуєте сховище підказок, ви можете використовувати елементи та / або html як заголовок та текст підказки.