Определение типа устройства

Для работы с Tooltipster необходимо подключить саму библиотеку и CSS-стили. Обычно это делается через <link> для стилей и <script> для JavaScript-кода:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/css/tooltipster.bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

После подключения можно инициализировать тултип на элементе:

$('.tooltip-element').tooltipster({
    content: 'Пример подсказки',
    theme: 'tooltipster-default',
    delay: 200,
    trigger: 'hover'
});

Ключевые параметры:

  • content — текст или HTML, который будет отображаться в тултипе. Можно использовать функцию для динамического контента.
  • theme — визуальная тема тултипа.
  • delay — задержка перед появлением подсказки.
  • trigger — событие для отображения (hover, click, custom).

Динамическое определение типа устройства

Tooltipster позволяет адаптировать поведение подсказок под тип устройства (мобильное или десктопное). Для этого используется проверка ширины окна или специальных свойств navigator.userAgent.

function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

$('.tooltip-element').tooltipster({
    content: 'Подсказка адаптирована под устройство',
    theme: 'tooltipster-default',
    trigger: isMobileDevice() ? 'click' : 'hover',
    interactive: isMobileDevice(), 
    maxWidth: isMobileDevice() ? 250 : 400
});

Объяснение параметров для мобильных устройств:

  • trigger: 'click' — на мобильных устройствах удобнее открывать тултип по нажатию, а не по наведению.
  • interactive: true — позволяет взаимодействовать с содержимым тултипа (кнопки, ссылки) без его закрытия.
  • maxWidth — ограничение ширины, чтобы подсказка корректно отображалась на небольших экранах.

Адаптация содержимого тултипа под устройство

Можно изменять текст и HTML внутри тултипа в зависимости от типа устройства:

$('.tooltip-element').tooltipster({
    content: isMobileDevice() ? 'Мобильная подсказка' : 'Десктопная подсказка',
    theme: 'tooltipster-light',
    side: isMobileDevice() ? 'bottom' : 'top'
});

Особенности параметра side:

  • 'top', 'bottom', 'left', 'right' — позиция тултипа относительно элемента.
  • Для мобильных устройств чаще выбирают 'bottom' для удобства чтения.

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

Для более гибкой адаптации можно комбинировать Tooltipster с CSS-медиазапросами:

@media (max-width: 768px) {
    .tooltipster-default {
        font-size: 14px;
        padding: 10px;
    }
}

@media (min-width: 769px) {
    .tooltipster-default {
        font-size: 16px;
        padding: 15px;
    }
}

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

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

Если на странице много элементов с подсказками и требуется различное поведение для мобильных и десктопных устройств:

$('.tooltip-element').each(function() {
    $(this).tooltipster({
        content: $(this).data('tooltip'),
        trigger: isMobileDevice() ? 'click' : 'hover',
        interactive: isMobileDevice(),
        maxWidth: isMobileDevice() ? 250 : 400,
        theme: 'tooltipster-light'
    });
});

Использование data-tooltip позволяет хранить разные подсказки прямо в HTML:

<button class="tooltip-element" data-tooltip="Подсказка для кнопки 1">Кнопка 1</button>
<button class="tooltip-element" data-tooltip="Подсказка для кнопки 2">Кнопка 2</button>

Поддержка динамически добавляемых элементов

Tooltipster поддерживает добавление новых элементов после загрузки страницы. Для этого используется инициализация при добавлении:

$(document).on('mouseenter', '.dynamic-tooltip', function() {
    if (!$(this).hasClass('tooltipstered')) {
        $(this).tooltipster({
            content: 'Динамическая подсказка',
            trigger: isMobileDevice() ? 'click' : 'hover',
            interactive: isMobileDevice()
        }).tooltipster('open');
    }
});

Это предотвращает повторную инициализацию уже обработанных элементов.

Отслеживание событий и управление тултипами

Tooltipster предоставляет события, которые можно использовать для сложной логики в зависимости от устройства:

$('.tooltip-element').on('tooltipster:show', function() {
    if (isMobileDevice()) {
        console.log('Тултип открыт на мобильном устройстве');
    } else {
        console.log('Тултип открыт на десктопе');
    }
});

$('.tooltip-element').on('tooltipster:close', function() {
    console.log('Подсказка закрыта');
});

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

Выводы по типу устройства

  • Использование navigator.userAgent и медиазапросов позволяет корректно определять тип устройства.
  • Параметры trigger, interactive, maxWidth и side следует адаптировать для мобильных и десктопных устройств.
  • Tooltipster поддерживает как статические, так и динамические элементы, что позволяет строить комплексные интерфейсы с подсказками на любом устройстве.
  • События и динамическая смена контента повышают гибкость и позволяют создавать адаптивные, интерактивные подсказки для пользователей на любых экранах.
Оглавление