Эта страница является туториалом по кастомизации WdsTooltips.
Пожалуйста держите в уме, что стили и импорты должны находится и CSS для компьютеров (MediaWiki:Common.css), и в CSS для телефонов (MediaWiki:FandomMobile.css для вики на Fandom и MediaWiki:Mobile.css для вики на Gamepedia).
Простейшая конфигурация
Этот набор стилей позволит вам улучшить читаемость и воспринимаемость подсказок, а также включает исправления для некоторых элементов, которые ломают вёрстку когда используются без подсказок.
The following properties can be customized via variables:
.custom-tooltip {
--tooltip-max-width: <length>; /* default: 250px */
--tooltip-max-height: <length>; /* default: 250px */
}
Свои стили
/* Цвета подсказки */
.custom-tooltip {
--wds-dropdown-background-color: <color>;
--wds-dropdown-border-color: <color>;
--wds-dropdown-text-color: <color>;
}
.custom-tooltip .wds-dropdown__toggle {
/* Стили переключателя */
}
.custom-tooltip .wds-dropdown__content {
/* Стили контента */
}
.custom-tooltip:before,
.custom-tooltip:after {
/* Стили шеврона/стрелки */
}
Анимация попапов
The following properties can be customized via variables:
.custom-tooltip {
--tooltip-animation-duration: <time>; /* default: 0.1s */
--tooltip-animation-delay: <time>; /* default: 0.25s */
}
Компактный скролл
.custom-tooltip ::-webkit-scrollbar {
background-color: transparent;
max-width: 5px;
max-height: 5px;
}
.custom-tooltip ::-webkit-scrollbar-thumb {
background-color: var(--wds-dropdown-border-color);
border-radius: 5px;
}
@supports (scrollbar-width: thin) {
.custom-tooltip .wds-dropdown__content .inset {
scrollbar-color: var(--wds-dropdown-border-color) transparent;
scrollbar-width: thin;
}
}
Встроенные классы
WDS предоставляет дополнительные классы для dropdown'ов, которые могут задавать расположение и поведение подсказок. В синтаксисе шаблона подсказок классы с целями на элементы wds-dropdown и wds-dropdown__content задаются через значения параметров class1 и class2 соответсвенно. Классы с соответствующей целью можно использовать вместе.
| Класс | Цель | Функция | Демонстрация |
|---|---|---|---|
wds-is-left-aligned
|
wds-dropdown__content
|
Отображает текст dropdown'а левее переключателя | Переключатель Подсказка с левой стороны |
wds-is-right-aligned
|
wds-dropdown__content
|
Отображает текст dropdown'а правее переключателя | Переключатель Подсказка с правой стороны |
wds-is-flipped
|
wds-dropdown
|
Меняет вертикальную позицию подсказки | Переключатель Подсказка наверху |
wds-open-to-right
|
wds-dropdown
|
Открывает подсказку с правой стороны | Переключатель Подсказка справа |
wds-no-chevron
|
wds-dropdown
|
Убирает шеврон/стрелку | Переключатель Подсказка без шеврона |
wds-is-not-hoverable
|
wds-dropdown
|
Отключает подсказку на компьютерной версии | Переключатель — |
wds-is-hidden
|
wds-dropdown
|
Скрывает элемент | Переключатель — |
wds-is-active
|
wds-dropdown
|
Подсказка всегда активна | Переключатель Активная подсказка |