xF2 Add-on [XGrid] Interactive Tooltip

[XGrid]

Совместимость с XenForo: 2.3
Видимый копирайт: Нет

[XGrid] Interactive Tooltip — аддон для XenForo, который позволяет создавать интерактивные информационные подсказки с произвольным содержимым и набором параметров.

Возможности:

• Произвольное содержимое внутри tooltip.
• Поддержка обычного текста, изображений, BB-CODE и другого содержимого XenForo.
• Настраиваемые поля через ACP.
• Для каждого поля можно задать: FIELD_ID, Name, Color
• Неизвестные поля автоматически игнорируются.
• Значения отображаются в порядке, заданном в ACP, независимо от порядка их указания в BB-CODE.
• Настраиваемая максимальная ширина tooltip.

Настройки:

1. По умолчанию в Manage Fields (нету полей, на скриншоте они показаны в качестве демонстрации).
2. Возможность использовать Drag-n-Drop для сортировки в нужной последовательности отображения полей.
3. FIELD_ID используется как уникальный идентификатор, чтобы потом к нему обращаться и сверять с тем что пришло к нам в BB-CODE.
4. Можно нажать на цвет и выбрать в палитре или в поле указать собственный цвет текста (который будет выделять значения переданных этих полей).

Как использовать BB-CODE?

[item_tooltip="field_id=ваше_значение|field_id=ваше_значение"]тут любая картинка и текст[/item_tooltip]

Пример из видео:

[item_tooltip="p_atk=170|m_atk=143|grade=A|type=Sword / One-Handed|sc=When using magic, it increases MP Consumption by 15% and M. Atk. B increases by 153. Enhances damage to a target during PvP."] Swords of Elements [ Magic Power ][/item_tooltip]

Демонстрация (как работать с полями):

1. К примеру мы добавили поле FIELD_ID (sc), с именем Soul Crystal и выбрали ему цвет, как показано в скриншоте в Настройках (последнее поле).
2. На выходе мы получаем вот такой результат.
   
3. Мы к примеру хотим убрать название Soul Crystal, и сделать текст по левой стороне и без жирности.
4. Смотрим в настройках у нас FIELD_ID (sc), идем в шаблон EXTRA.less, добавляем следующий код
   

   .xgrid-tooltip .field_sc { display: none; }
   .xgrid-tooltip .field-value_sc { text-align: left; margin-top: 10px; font-weight: normal; }

5. И получаем данный результат
   

Более наглядно:


[XGrid] Interactive Tooltip 1.0.0