Адаптация размеров

Tooltipster — мощная библиотека для создания интерактивных всплывающих подсказок на страницах, и одной из ключевых возможностей является динамическая адаптация размеров подсказок в зависимости от контента и окружающего пространства.

Автоматическая подгонка размеров

По умолчанию Tooltipster автоматически рассчитывает размеры тултипа исходя из содержимого. Это означает, что если текст, изображение или HTML-элемент внутри подсказки меняется, ширина и высота тултипа будут корректироваться без дополнительного вмешательства.

Пример инициализации с автоматической подгонкой:

$('.tooltip').tooltipster({
    content: 'Простая подсказка с динамическим размером',
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200
});

Ключевой момент: Tooltipster использует max-width и max-height для ограничения размеров, чтобы тултип не выходил за пределы окна браузера.

Настройка максимальных и минимальных размеров

Для контроля внешнего вида подсказки можно задать параметры maxWidth и minWidth:

$('.tooltip').tooltipster({
    content: 'Подсказка с ограничением размеров',
    maxWidth: 300,   // Максимальная ширина в пикселях
    minWidth: 150    // Минимальная ширина в пикселях
});

Эти параметры позволяют обеспечить читаемость и предотвратить чрезмерное растяжение подсказки, особенно при динамически изменяемом содержимом.

Динамическое изменение содержимого и перерасчет размеров

Tooltipster предоставляет метод content() для изменения содержимого в реальном времени. После изменения размера тултипа библиотека автоматически перерасчитывает его ширину и высоту:

var instance = $('.tooltip').tooltipster().tooltipster('instance');

instance.content('Новое содержимое с большим текстом, требующим увеличения тултипа');

Если новое содержимое шире или выше предыдущего, тултип плавно увеличивается, сохраняя анимацию появления.

Автоматическая подгонка по окну (viewport)

Tooltipster учитывает границы окна браузера, чтобы подсказка не выходила за экран. Для этого используются настройки side и functionPosition.

Пример адаптивного позиционирования:

$('.tooltip').tooltipster({
    content: 'Подсказка, подстраивающаяся под окно',
    side: ['top', 'right', 'bottom', 'left'],
    functionPosition: function(instance, helper, position){
        // position - объект с координатами и размерами тултипа
        if(position.coord.left + position.size.width > $(window).width()){
            position.coord.left = $(window).width() - position.size.width - 10;
        }
        return position;
    }
});

Важный аспект: функция functionPosition позволяет не только ограничивать размеры, но и менять координаты тултипа, если он может выйти за видимую область экрана.

Адаптация при изменении размеров окна

Tooltipster автоматически пересчитывает позицию и размеры тултипа при изменении размеров окна браузера. Для более сложных сценариев можно использовать метод reposition():

$(window).on('resize', function(){
    $('.tooltip').tooltipster('reposition');
});

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

Использование CSS для дополнительной адаптации

Даже с динамическим подстроением размеров, CSS остаётся важным инструментом. Через классы темы или собственные стили можно ограничить максимальную высоту, добавить скролл и обеспечить визуальную согласованность:

.tooltipster-sidetip .tooltipster-box {
    max-height: 200px;
    overflow-y: auto;
}

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

Резюме возможностей адаптации

  • Автоматическая подгонка размеров под содержимое.
  • Ограничение размеров через maxWidth и minWidth.
  • Динамическое обновление содержимого с перерасчетом размеров.
  • Учет границ окна для предотвращения выхода за экран.
  • Ручное перераспределение с помощью reposition() при изменении интерфейса.
  • Поддержка скролла и ограничений через CSS для больших подсказок.

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

Оглавление