dev

This page, or parts of it, are still untranslated. Please translate it to the appropriate language (українська).

Tooltips — це скрипт, що дозволяє відобразити інтерактивні підказки при наведені курсори на певні елементи.

Примітки: пам'ятайте про ваших мобільних читачів і не використовуйте інтерактивні підказки у якості єдиного способу відображення вмісту. Краще використовувати їх у вигляді короткого резюме терміна, а всі деталі помістити на відповідній сторінці.

Installation

Usage

Щоб скрипт відображав інтерактивну підказку при наведенні на певний елемент, вам потрібно додати до нього спеціальний клас. Деякі типи підказок також підтримують додаткові параметри, вказані через data- атрибути (детально див. у розділі Конфігурація).

Існують три різні типи інтерактивних підказок:

Загальні підказки – клас
basic-tooltip
Цей тип інтерактивної підказки буде показувати тільки вміст title цього элемента.
<span class="basic-tooltip" title="Текст всередині підказки, який буде показуватися">Приклад основної підказки</span>
Приклад основної підказки
Просунуті підказки – клас
advanced-tooltip
Вміст цієї інтерактивної підказки узято зсередини елемента за допомогою класу tooltip-contents. Вміст елементу приймається за візуалізацію - це дозволяє використовувати вікі-розмітку і елементи HTML для форматування інтерактивної підказки. Пам'ятайте, що вміст цих інтерактивних підказок завантажується при завантаженні сторінки. Це може значно сповільнити час завантаження сторінок з великою кількістю інтерактивних підказок (включаючи повторне використання одних і тих же підказок).
<div class="advanced-tooltip" style="display:inline-block">Приклад просунутої підказки<div class="tooltip-contents">Вміст підказки<br><code>Включаючи HTML теги</code></div></div>
Приклад просунутої підказки
Вміст підказки
Включаючи HTML теги
Advanced tooltips will cause a new line when they're used inline if any of the tooltip content contains a block-level tag (regardless of styles), due to the MediaWiki parser automatically adding <p> tags to the subsequent text. This can be solved by wrapping the entire text in a <span> or <div> to suppress the automatic <p> tag, e.g.
<span>This is an example of <span class="advanced-tooltip">Приклад просунутої підказки<div class="tooltip-contents">Tooltip content</div></span> being used inline.</span>
This is an example of Приклад просунутої підказки
Tooltip content
 being used inline.
Користувацькі підказки – клас
ваш власний
Цей тип дозволяє максимально контролювати вміст підказки зі зменшеним часом завантаження сторінки. Ви можете використовувати шаблони для створення спливаючих підказок і передачі параметрів шаблоном за допомогою атрибутів data- елемента, на який ви наводите. Його перевага перед просунутими підказками полягає в тому, що вміст підказки завантажується, коли це необхідно, і одна і та ж підказка для декількох елементів (однакових параметрів) буде завантажена один раз.
<span class="custom-tooltip-text" data-parameter="Будь-яке значення">Користувацькі підказки – text</span>
Користувацькі підказки – text
<span class="custom-tooltip-parse" data-parameter="Будь-яке значення">Користувацькі підказки – parse</span>
Користувацькі підказки – parse

Сполучення

Різні типи підказок можна комбінувати, щоб відобразити їх одночасно. Порядок спливаючих підказок збігається з порядком класів. 

<div class="advanced-tooltip basic-tooltip custom-tooltip-parse custom-tooltip-text" data-parameter="Parameter" style="display: inline-block;">Комбіновані підказки<div class="tooltip-contents">Розширена підказка</div></div>
Комбіновані підказки
Розширена підказка

Configuration

Без якогось налаштування скрипт буде підтримувати тільки базові і додаткові підказки. Існують три змінні, що містять конфігурацію для скрипта. Ви можете вказати їх у MediaWiki:Common.js на вашій вікі.

Загальні налаштування – tooltips_config

Тут ви можете налаштувати деякі загальні функції, використовуючи цей об'єкт:

events
Є списком подій JavaScript для віконного об'єкта, які будуть запускати пошук спливаючих підказок, які не були присутні при ініціалізації скрипта. Таким чином, ви можете змусити спливаючі підказки працювати в елементі користувацького інтерфейсу, який додається після завантаження сторінки і ініціалізації спливаючих підказок. Наприклад, в custom right rail модулі.
noCSS
Якщо ви хочете відключити імпорт CSS за замовчуванням, встановіть для нього значення true
offsetX / offsetY
це значення, на які підказка буде переміщатися вправо і вниз (відповідно) з того місця, де наведений курсор (пам'ятайте, що поле підказки може переміщати далі), значення за замовчуванням — 8 для обох, але значення нижче 5 не рекомендується.
waitForImages
Це змінить поведінку підказок, коли у них будуть зображення всередині. За замовчуванням (false) спливаючі підказки будуть відображатися, навіть якщо зображення ще не завантажені повністю. Зображення в кінцевому підсумку з'являться при завантаженні (ліниве завантаження). Установка цього значення на true змусить скрипт чекати, поки усі зображення будуть повністю завантажені, перш ніж показувати підказку.

Приклад конфігурації об'єкта: 

window.tooltips_config = {
    events: ['CustomEvent'],
    noCSS: true,
    offsetX: 5,
    offsetY: 10,
    waitForImages: true,
}

Створення користувацьких типів підказок – tooltips_list

Ви можете додавати свої спливаючі підказки в цей масив. Кожен тип підказки — це об'єкт з цими властивостями:

classname
CSS, який викличе спливаючу підказку цього типу. Ця властивість обов'язкова.
onParsed
Ця функція буде виконуватися, коли було отримано парсированний текст (з підказкою є його контекстом — this).
parse
Схоже на text але результуючий текст буде парсированним, дозволяючи використати синтаксис wiki за рахунок короткої затримки.
text
Цей рядок або функція буде використовуватися у якості вмісту підказки.

І text і parse можуть бути або рядком або Функцієй.

Якщо значення є рядком, ви можете використати параметри, які будуть узяті з елементе, на який вказує курсор. Щоб використати параметр, вам потрібно додати це у текст: <#parameter-name#>. Цей тег буде замінений значенням data-parameter-name атрибуту елемента. Ви можете використовувати як кілька параметрів, так і один параметр кілька разів. 

{{Шаблон|<#value#>}}  <!-- <#value#> буде замінено вмістом атрибуту data-value -->

Інший спосіб — вказати функцію, яка буде виконуватися щоразу, коли новий елемент без підказки буде hovered-over. Ця функція має цей елемент у якості свого контексту і може повертати вміст підказки (або вікі-текст для синтаксичного розбіру). Повернений рядок не підтримує такі параметри, як вказані вище, оскільки ви можете самі отримати доступ до будь-яких атрибутів (наприклад: $(elem).data('parameter-name'))

Приклад об'єкта з налаштуваннями для одного типу підказки 

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: '{'+'{Tooltip|<#name#>|<#value#>}}',   // '+' makes MediaWiki ignore the template on the page with settings
}

Example of an object with a parse function: 

{
    classname: 'custom-tooltip',
    delay: 500,
    parse: function parse(elem) { return '{'+'{Tooltip|' + $(elem).data('name') + '|' + $(elem).data('value') + '}}' },
}

Common properties

{These properties can be used for all types, including the built in ones (basic-tooltip and advanced-tooltip):

delay
Just like the name says. It'll make the tooltip appear after the specified delay in milliseconds. Tip: 1 second = 1000 milliseconds.
onShow / onHide
Are pseudo-events that will be triggered (respectively) right after the tooltip is shown and right before it'll be hidden. These are callback functions with the tooltip itself being their context (this) and the hover handle that triggered the tooltip as an argument.

Example of settings for two custom tooltips and modifying behavior of basic tooltips: 

window.tooltips_list = [
    {
        classname: 'custom-tooltip-text',
        text: "Parameter: <#parameter#><br>This is just text and HTML - wikitext '''won't''' be parsed",
    }, {
        classname: 'custom-tooltip-parse',
        parse: '{|style="white-space:nowrap;"\n!Parameter:\n|<#parameter#>\n|-\n!Lc:\n|{'+'{lc:<#parameter#>}}\n|-\n!Uc:\n|{'+'{uc:<#parameter#>}}\n|-\n!PAGENAME:\n|{'+'{PAGENAME}}\n|}',
    }, {
        classname: 'basic-tooltip',
        delay: 500,
        onHide: function(handle) { $(this).html($(handle).html()) },
    },
]

Режим налагодження – tooltips_debug

Установка значення true зробить деякі елементи видимими, що полегшить виявлення проблем. Режим налагодження також можна тимчасово включити, додавши ?ttdebug=true наприкінці URL-адреси. Ось так: https://dev.fandom.com/wiki/Tooltips?ttdebug=true

Інші примітки і підказки

Демонстрація

Не соромтеся додавати свою вікі в список, якщо він використовує цей скрипт, щоб показати, як він працює в дії

See also