Tooltips/ru

Tooltips это скрипт, позволяющий отображать всплывающие подсказки при наведении курсора на определенные элементы.

Примечание: помните о ваших мобильных читателях и не используйте всплывающие подсказки в качестве единственного способа отображения содержимого. Лучше использовать их в виде краткого резюме термина а все детали поместить на соответствующей на странице.

Использование
Чтобы скрипт отображал всплывающую подсказку при наведении на определенный элемент, вам нужно добавить к нему специальный класс. Некоторые типы подсказок также поддерживают дополнительные параметры, указанные через   атрибуты (подробнее см. в разделе Конфигурация).

Существует три различных типа всплывающих подсказок:

Основные подсказки – класс:  
 * Этот тип всплывающей подсказки будет показывать только содержимое   этого элемента.
 * Пример основной подсказки
 * Пример основной подсказки

Продвинутые подсказки – класс:  
 * Содержимое этой всплывающей подсказки взято изнутри элемента с помощью класса  . Содержимое элемента принимается за визуализацию - это позволяет использовать разметку wiki и элементы HTML для форматирования всплывающей подсказки. Помните, что содержимое этих всплывающих подсказок загружается при загрузке страницы. Это может значительно замедлить время загрузки страниц с большим количеством всплывающих подсказок (включая повторное использование одних и тех же подсказок).
 * Пример продвинутой подсказки Содержимое подсказки
 * Пример продвинутой подсказки Содержимое подсказки

Пользовательские подсказки – класс: ваш собственный
 * Этот тип позволяет максимально контролировать содержимое всплывающей подсказки с уменьшенным временем загрузки страницы. Вы можете использовать шаблоны для создания всплывающих подсказок и передачи параметров шаблону с помощью атрибутов   элемента, который вы наводите. Его преимущество перед продвинутыми подсказками заключается в том, что содержимое всплывающей подсказки загружается, когда это необходимо, и одна и та же подсказка для нескольких элементов (одинаковых параметров) будет загружена один раз.
 * Пользовательские подсказки – пример текста
 * Пользовательские подсказки – пример текста


 * Пользовательские подсказки – парсирование
 * Пользовательские подсказки – парсирование

Сочетания
Различные типы подсказок можно комбинировать, чтобы отображать их одновременно. Порядок всплывающих подсказок совпадает с порядком классов.
 * Комбинированные подсказки Advanced tooltip
 * Комбинированные подсказки Advanced tooltip

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

Основные настройки –
Здесь вы можете настроить некоторые основные функции, используя этот объект:
 * offsetX и offsetY: это значения, на которые всплывающая подсказка будет перемещаться вправо и вниз (соответственно) с того места, где наведён курсор (помните, что поле всплывающей подсказки может перемещать дальше), Значение по умолчанию - 8 для обоих, но значения ниже 5 не рекомендуются.
 * waitForImages: Это изменит поведение подсказок, когда у них будут изображения внутри. По умолчанию ( ) всплывающие подсказки будут отображаться, даже если изображения еще не загружены полностью. Изображения в конечном итоге появятся при загрузке (ленивая загрузка). Установка этого значения на   заставит скрипт ждать, пока все изображения будут полностью загружены, прежде чем показывать всплывающую подсказку.
 * events: Является списком событий JavaScript для оконного объекта, которые будут запускать поиск всплывающих подсказок, которые не присутствовали при инициализации скрипта. Таким образом, вы можете заставить всплывающие подсказки работать в элементе пользовательского интерфейса, который добавляется после загрузки страницы и инициализации всплывающих подсказок. Например, в custom right rail модуле.
 * noCSS: Если вы хотите отключить импорт CSS по умолчанию, установите для него значение true

Пример конфигурации объекта:

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

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

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

Другой способ - указать функцию которая будет выполняться всякий раз, когда новый элемент без подсказки будет hovered-over. Эта функция имеет этот элемент в качестве своего контекста и может возвращать содержимое подсказки (или викитекст для парсирования). Возвращенная строка не поддерживает такие параметры, как указаны выше, поскольку вы можете сами получить доступ к любым атрибутам (например: )

Пример объекта с настройками для одного типа всплывающей подсказки

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

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

Режим отладки –
Установка значения   сделает некоторые элементы видимыми, что облегчит выявление проблем. Режим отладки также можно временно включить, добавив  в конце URL-адреса. Вот так: http://dev.wikia.com/wiki/Tooltips?ttdebug=true

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

 * Дополнительные классы для всплывающих подсказок:
 * : задается для всплывающих подсказок, которые имеют красные ссылки внутри - его можно использовать для скрытия всплывающих подсказок с отсутствующими шаблонами.
 * : для всплывающих подсказок, которые все еще ожидают загрузки парсированного содержимого - вы можете использовать его для показа индикатора загрузки или просто скрыть всплывающую подсказку, пока она не будет готова.
 * : каждая подсказка возвращает класс по типу (например: ) – отлично подходит для разных типов всплывающих подсказок.
 * Если ваши всплывающие подсказки имеют тень, вы можете захотеть освободить место, добавив к их div элементу свойства margin или padding.

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


 * Age of Wonders 3 Wiki
 * League of Legends Wiki: de, en, es, pl, ru, vi
 * Final Fantasy Wiki
 * Unordinary Wikia
 * Fate/Grand Order Wiki
 * Paragon Wiki
 * Smite Wiki
 * Sparta Remix Wiki
 * Re:Monster Wiki
 * Tangledeep Wiki
 * Risk of Rain Wiki
 * Love Live! Wikia Vietnam