[XGrid] Interactive Tooltip

Совместимость с XenForo

Видимый копирайт: Нет

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

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

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

Настройки:

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

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

Форматирование (BB-код):

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

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

Форматирование (BB-код):

[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]

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

К примеру мы добавили поле FIELD_ID (sc), с именем Soul Crystal и выбрали ему цвет, как показано в скриншоте в Настройках (последнее поле).
На выходе мы получаем вот такой результат.
Мы к примеру хотим убрать название Soul Crystal, и сделать текст по левой стороне и без жирности.
Смотрим в настройках у нас FIELD_ID (sc), идем в шаблон EXTRA.less, добавляем следующий код
CSS:
```
.xgrid-tooltip .field_sc { display: none; }
.xgrid-tooltip .field-value_sc { text-align: left; margin-top: 10px; font-weight: normal; }
```
И получаем данный результат

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

[XGrid] Interactive Tooltip 1.0.0

Оценки

Другие ресурсы пользователя XGrid

Поделиться ресурсом