Изменение формы и размеров подсказок

В Intro.js форма подсказок определяется с помощью CSS-классов, но библиотека предоставляет встроенные методы для гибкого управления. По умолчанию подсказки имеют прямоугольную форму с закругленными углами, но можно изменять эти параметры для создания визуально уникальных элементов.

Основные свойства для формы:

  • border-radius – задаёт скругление углов подсказки.

    .introjs-tooltip {
    border-radius: 12px;
}

  • box-shadow – добавляет тень, делая подсказку объёмной.

    .introjs-tooltip {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

  • border – позволяет подчеркнуть границы подсказки цветом или толщиной.

    .introjs-tooltip {
    border: 2px solid #3498db;
}

Для более динамичных форм можно использовать классы модификаторы: introjs-tooltip, introjs-tooltipReferenceLayer, introjs-arrow. Эти классы позволяют изменять не только рамки, но и стрелки подсказки.

Изменение размеров подсказок

Размеры подсказок в Intro.js настраиваются через CSS или через API при инициализации. Ключевые параметры:

  • width – задаёт ширину подсказки. Можно использовать фиксированные значения (px) или относительные (%).

    .introjs-tooltip {
    width: 300px;
}

  • max-width – ограничивает максимальную ширину, чтобы текст не растягивал подсказку слишком сильно.

    .introjs-tooltip {
    max-width: 400px;
}

  • height и max-height – регулируют высоту, полезно при большом объёме информации.

    .introjs-tooltip {
    max-height: 200px;
    overflow-y: auto;
}

Пример использования через API:

introJs().setOptions({
    tooltipClass: 'custom-tooltip'
}).start();

В CSS для .custom-tooltip можно указать все размеры и стили.

Настройка стрелки подсказки

Стрелка подсказки указывает на целевой элемент и также может изменять форму и размеры:

  • width и height стрелки регулируются через CSS:

    .introjs-arrow {
    width: 20px;
    height: 20px;
}

  • Цвет стрелки наследует цвет подсказки по умолчанию, но можно изменить через border-color:

    .introjs-arrow {
    border-color: #3498db;
}

Для сложных форм стрелки используют псевдоэлементы ::before и ::after, что позволяет создавать треугольники, ромбы и другие нестандартные формы.

Адаптивные подсказки

Intro.js поддерживает динамическое изменение размеров подсказок в зависимости от контента и ширины окна:

  • Автоматическая подгонка ширины под текст:

    .introjs-tooltip {
    width: auto;
    min-width: 150px;
    max-width: 400px;
}

  • Перенос текста на несколько строк:

    .introjs-tooltiptext {
    white-space: normal;
    word-wrap: break-word;
}

  • Скроллинг при превышении высоты:

    .introjs-tooltip {
    max-height: 250px;
    overflow-y: auto;
}

Работа с разными размерами экранов

Для мобильных устройств и планшетов необходимо учитывать ограниченную площадь экрана:

@media (max-width: 768px) {
    .introjs-tooltip {
        width: 90%;
        font-size: 14px;
    }
    .introjs-arrow {
        width: 15px;
        height: 15px;
    }
}

Такой подход обеспечивает корректное отображение подсказок на всех устройствах без обрезки текста и наложения на элементы интерфейса.

Комбинирование кастомных стилей и API

Intro.js позволяет комбинировать CSS-стили и параметры через API для максимальной гибкости:

introJs().setOptions({
    steps: [
        {
            element: '#button1',
            intro: 'Нажмите сюда, чтобы продолжить',
            tooltipClass: 'rounded-tooltip'
        },
        {
            element: '#input1',
            intro: 'Введите данные сюда',
            tooltipClass: 'large-tooltip'
        }
    ]
}).start();

В CSS можно задать уникальные свойства для каждого класса:

.rounded-tooltip {
    border-radius: 20px;
    width: 250px;
}

.large-tooltip {
    border-radius: 5px;
    width: 400px;
    max-height: 300px;
    overflow-y: auto;
}

Это позволяет создавать подсказки с различными формами и размерами на одном интерфейсе, сохраняя визуальное разнообразие и удобство восприятия.

Динамическое изменение формы и размеров во время показа

Используя события Intro.js, можно изменять подсказку на лету:

introJs().onafterchange(function(targetElement) {
    const tooltip = document.querySelector('.introjs-tooltip');
    if(targetElement.id === 'special') {
        tooltip.style.width = '500px';
        tooltip.style.borderRadius = '0px';
    } else {
        tooltip.style.width = '300px';
        tooltip.style.borderRadius = '10px';
    }
}).start();

Такой метод полезен для адаптации подсказок к разному контенту, динамически меняющемуся на странице.

Оглавление