Class: Tips

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

Credits

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

Примітка:

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

Implements

• Events, Options

Tips Method: constructor

Аргументи:

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

Options

• showDelay - (number: defaults to 100) Затримка перед спрацюванням події show.
• hideDelay - (number: defaults to 100) Затримка перед спрацюванням події hide.
• title - (string|function: defaults to title) Властивість елемента, яка використовується for заголовок підказки. Якщо опція this є function, вона виконається на кожному елементі з ним як першим аргументом. Використовується return значення this function як заголовок підказки
• text - (string|function) Поведінка така сама, як у опції title, але for текст підказки. За замовчуванням використовується атрибут rel або href як текст підказки.
• className - (string: defaults to null) className, який отримає контейнер вашої підказки. Корисно for стилізації.
  • Елемент підказки всередині вищезазначеного контейнера підказки матиме 'tip' як classname.
  • Заголовок матиме як classname: tip-title
  • Текст матиме як classname: tip-text
• offset - (object: defaults to {x: 16, y: 16}) Відстань вашої підказки від миші.
• fixed - (boolean: defaults to false) Якщо встановлено true, підказка не буде слідувати за мишю.
• windowPadding - (object; defaults to {x: 0, y: 0}) Дозволяє зменшити або розширити віртуальний розмір window for позиціонування підказок. Підказки не зможуть наблизитися до краю window з будь-якої сторони на основі зсуву this.
• id - (string: defaults to null) Додає id до елемента підказки, необхідний for підтримку WAI-ARIA.
• waiAria - (boolean: defaults to true) Вимагає встановлення опції id. Увімкнути підтримку WAI-ARIA. Додає aria-атрибути до підказки.

Events

• show - (function: defaults to function(tip, hovered){ tip.setStyle('display', 'block'); }) Стандартна function for події show, передає елемент підказки та поточний наведений елемент.
• hide - (function: defaults to function(tip, hovered){ tip.setStyle('display', 'none'); }) Стандартна function for події hide, передає поточний наведений елемент.
• attach - (function) Спрацьовує, коли елемент додається до екземпляра tips. Передає елемент як аргумент.
• detach - (function) Спрацьовує, коли слухачі подій видаляються з елемента. Передає елемент як аргумент.

Приклад:

HTML

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

JavaScript

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

Tips Event: show

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

Signature

onShow(tip)

Аргументи:

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

Приклад:

myTips.addEvent('show', function(tip, el){
    tip.addClass('someCustomClassBecauseTheTipIsVisible');
});

Примітка:

Щоб перевизначити поведінку показу підказки за замовчуванням, ви повинні або оголосити подію onShow в опціях при ініціалізації, або видалити подію onShow з class самі. Приклад::

    var myTips = new Tips('.thisisatooltip', {
        onShow: function(tip, el){
            tip.setStyles({
                visibility: 'hidden'
                display: 'block'
            }).fade('in');
        }
    });
    //if you want to add this after init
    myTips.removeEvents('show').addEvent('show', function(tip, el){
        tip.setStyles({
            visibility: 'hidden'
            display: 'block'
        }).fade('in');
    });

Tips Event: hide

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

Signature

onHide(tip)

Аргументи:

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

Приклад:

myTips.addEvent('hide', function(tip, el){
    tip.removeClass('someCustomClassBecauseTheTipIsVisible');
});

Примітка:

Щоб перевизначити поведінку приховування підказки за замовчуванням, ви повинні або оголосити подію onHide в опціях при ініціалізації, або видалити подію onHide з class самі. Приклад::

    var myTips = new Tips('.thisisatooltip', {
        onHide: function(tip, el){
            tip.fade('out').get('tween').chain(function(){
                tip.setStyle('display', 'none');
            });
        }
    });
    //if you want to add this after init
    myTips.removeEvents('hide').addEvent('hide', function(tip, el){
        tip.fade('out').get('tween').chain(function(){
            tip.setStyle('display', 'none');
        });
    });

Tips Method: setTitle

Оновлює заголовок підказки. Примітка: що заголовок перепризначається, коли підказка ховається і знову показується; this метод дозволяє змінити його після того, як він став видимим.

Синтаксис:

myTips.setTitle(title);

Аргументи:

1. title - (mixed) Колекція елементів, окремий Element, або рядок тексту. forерші два будуть ухвачені в підказку, останній буде встановлений як її HTML.

Повертає:

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

Приклад:

myTips.setTitle("I'm the new title!");

Tips Method: setText

Оновлює текст підказки. Примітка: що текст перепризначається, коли підказка ховається і знову показується; this метод дозволяє змінити його після того, як він став видимим.

Синтаксис:

myTips.setText(text);

Аргументи:

1. text - (mixed) Колекція елементів, окремий Element, або рядок тексту. forерші два будуть ухвачені в підказку, останній буде встановлений як її HTML.

Повертає:

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

Приклад:

myTips.setText("I'm the new body text!");

Tips Method: attach

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

Синтаксис:

myTips.attach(elements);

Аргументи:

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

Повертає:

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

Приклад:

myTips.attach('a.thisisatip');

Tips Method: 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 with storage

Ви також можете призначати заголовки та вміст підказок через 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 як заголовок та текст підказки.