dev

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">Advanced tooltip</div></div>
Комбинированные подсказки
Advanced tooltip

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

You can add your own tooltips to this array. Every type of tooltip is an object with these properties:

classname
CSS, который вызовет всплывающую подсказку этого типа. Это свойство обязательно.
onParsed
Эта функция будет выполняться, когда был получен парсированный текст (с подсказкой являющейся его контекстом - this)
parse
Похоже на text но результирующий текст будет парсированным, позволяя использовать синтаксис wiki за счет короткой задержки.
text
Эта строка или функция будет использоваться в качестве содержимого всплывающей подсказки.

И text и parse могут быть либо строкой либо Функцией.

Если значение является строкой, вы можете использовать параметры, которые будут взяты из элемента, на который указывает курсор. Чтобы использовать параметр, вам нужно добавить это в текст: <#parameter-name#>. Этот тег будет заменён значением data-parameter-name атрибута элемента. Вы можете использовать как несколько параметров, так и один параметр несколько раз. 

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

Другой способ - указать функцию которая будет выполняться всякий раз, когда новый элемент без подсказки будет hovered-over. Эта функция имеет этот элемент в качестве своего контекста и может возвращать содержимое подсказки (или викитекст для парсирования). Возвращенная строка не поддерживает такие параметры, как указаны выше, поскольку вы можете сами получить доступ к любым атрибутам (например: $(this).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') + '}}' },
}

Общие свойства

{Эти свойства могут использоваться для всех типов, включая встроенные (basic-tooltip и advanced-tooltip)

delay
Так же, как и название. Это заставит всплывающую подсказку появиться после указанной задержки в миллисекундах. Подсказка: 1 секунда = 1000 милисикундам.
onShow / onHide
Это псевдо-события, которые будут запускаться (соответственно) сразу после всплывающей подсказки и прямо перед тем, как она будет скрыта. Это callback функции с самой подсказкой, являющейся их контекстом (this) и hover handle, который вызвал всплывающую подсказку в качестве аргумента.

Пример настроек для двух пользовательских всплывающих подсказок и изменения поведения основных всплывающих подсказок: 

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-адреса. Вот так: http://dev.wikia.com/wiki/Tooltips?ttdebug=true https://dev.fandom.com/wiki/Tooltips?ttdebug=true

Другие примечания и подсказки

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

Не стесняйтесь добавлять свою вики в список, если он использует этот скрипт, чтобы показать, как он работает в действии :)

See also