Основные позиции

Для начала работы с Tooltipster необходимо подключить саму библиотеку и её стили. Существует несколько способов: через CDN или установку через npm/yarn.

Подключение через CDN:

<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.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tooltipster@4.2.8/dist/js/tooltipster.bundle.min.js"></script>

Установка через npm:

npm install tooltipster

После этого подключение в проекте:

import 'tooltipster/dist/css/tooltipster.bundle.min.css';
import $ from 'jquery';
import 'tooltipster';

Инициализация Tooltipster

Инициализация выполняется на элементе, которому необходимо добавить подсказку. Базовый синтаксис:

$('.tooltip').tooltipster();

По умолчанию Tooltipster берёт текст подсказки из атрибута title элемента:

<button class="tooltip" title="Это базовая подсказка">Кнопка</button>

Настройка основных опций

Tooltipster предоставляет множество опций для настройки поведения подсказок. Ключевые параметры:

  • content – контент подсказки. Может быть строкой, HTML или jQuery-объектом.
$('.tooltip').tooltipster({
    content: $('<span>Содержимое HTML</span>'),
});
  • theme – тема оформления. Tooltipster поставляется с предустановленными темами (tooltipster-default) или можно создавать собственные.
$('.tooltip').tooltipster({
    theme: 'tooltipster-noir',
});
  • delay – задержка появления подсказки в миллисекундах.
$('.tooltip').tooltipster({
    delay: 300,
});
  • animation – анимация появления. Возможные значения: 'fade', 'grow', 'swing', 'slide', 'fall'.
$('.tooltip').tooltipster({
    animation: 'grow',
});
  • trigger – событие, при котором подсказка появляется. Стандартные значения: 'hover', 'click', 'custom'.
$('.tooltip').tooltipster({
    trigger: 'click',
});
  • interactive – делает подсказку интерактивной, позволяя взаимодействовать с её содержимым.
$('.tooltip').tooltipster({
    interactive: true,
});

Управление позиционированием

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

  • side – сторона появления: 'top', 'bottom', 'left', 'right'.
$('.tooltip').tooltipster({
    side: 'right',
});
  • functionPosition – пользовательская функция для точной настройки позиции.
$('.tooltip').tooltipster({
    functionPosition: function(instance, helper, position){
        position.coord.top += 10; // смещение вниз на 10px
        return position;
    }
});
  • maxWidth – максимальная ширина подсказки, полезно для длинного текста.
$('.tooltip').tooltipster({
    maxWidth: 200,
});

Работа с HTML-контентом

Tooltipster позволяет использовать HTML в подсказках. Для этого необходимо задать contentAsHTML: true.

$('.tooltip').tooltipster({
    content: $('<div><strong>Важное сообщение</strong><br>Дополнительная информация</div>'),
    contentAsHTML: true,
});

Это особенно полезно для создания подсказок с кнопками, ссылками или формами.

Управление жизненным циклом подсказок

Tooltipster предоставляет методы для управления подсказками после инициализации:

  • open – открыть подсказку:
$('.tooltip').tooltipster('open');
  • close – закрыть подсказку:
$('.tooltip').tooltipster('close');
  • destroy – полностью удалить подсказку и освободить ресурсы:
$('.tooltip').tooltipster('destroy');
  • content – получить или установить новое содержимое:
$('.tooltip').tooltipster('content', 'Новое содержимое');

События

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

  • before – до появления подсказки.
  • ready – после отображения подсказки.
  • after – после скрытия подсказки.
  • position – после расчёта позиции.

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

$('.tooltip').tooltipster().on('tooltipster-ready', function(event){
    console.log('Подсказка отображена');
});

Поддержка нескольких подсказок

Tooltipster позволяет инициализировать несколько элементов одновременно:

$('.tooltip').tooltipster({
    theme: 'tooltipster-light',
    delay: 200
});

Каждый элемент может иметь собственный контент через атрибут title или через data-tooltip-content для более сложных HTML-подсказок:

<span class="tooltip" data-tooltip-content="#tooltip_content">Наведи меня</span>
<div class="tooltip_templates">
    <span id="tooltip_content">HTML содержимое с кнопкой <button>Нажми</button></span>
</div>

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

Для страниц с большим количеством элементов рекомендуется:

  • Использовать delegation для динамических элементов:
$('body').tooltipster({
    selector: '.tooltip',
    theme: 'tooltipster-shadow',
});
  • Минимизировать использование сложного HTML внутри подсказок.
  • Использовать одну тему для всех элементов, чтобы уменьшить количество CSS-правил.

Работа с динамическим контентом

Для подсказок, содержание которых зависит от состояния страницы или внешних данных, применяются функции в content:

$('.tooltip').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper){
        // асинхронная загрузка данных
        fetch('/api/info')
            .then(res => res.text())
            .then(data => instance.content(data));
    }
});

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

Этот набор инструментов и методов формирует базу для работы с Tooltipster, обеспечивая гибкое создание, кастомизацию и управление подсказками на веб-странице.

Оглавление