Контент из атрибута title

Tooltipster — это мощная библиотека для создания кастомизируемых всплывающих подсказок в JavaScript. Одним из наиболее удобных способов задания содержимого для тултипов является использование стандартного HTML-атрибута title. Это особенно полезно для быстрого внедрения подсказок без необходимости создания дополнительных элементов в DOM.

Подключение Tooltipster и базовая инициализация

Для работы с Tooltipster необходимо подключить библиотеку и её CSS. Стандартная структура подключения выглядит так:

<link rel="stylesheet" type="text/css" href="tooltipster.bundle.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="tooltipster.bundle.min.js"></script>

После подключения библиотеки, тултипы инициализируются на выбранных элементах с помощью метода .tooltipster():

$(document).ready(function() {
    $('.tooltip').tooltipster();
});

Здесь все элементы с классом tooltip будут автоматически обрабатывать контент из атрибута title.

Автоматическое извлечение текста из title

Tooltipster по умолчанию использует значение атрибута title для отображения подсказки. Если элемент HTML имеет такой код:

<button class="tooltip" title="Это подсказка">Наведи на меня</button>

то при наведении на кнопку появится всплывающая подсказка с текстом “Это подсказка”. Библиотека автоматически скрывает стандартный браузерный tooltip, заменяя его на кастомный.

Настройка извлечения контента через contentAsHTML

Если требуется использовать HTML-разметку внутри атрибута title, можно включить опцию contentAsHTML:

$('.tooltip').tooltipster({
    contentAsHTML: true
});

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

<button class="tooltip" title="<strong>Важное сообщение</strong><br>Дополнительная информация">Наведи на меня</button>

При этом HTML-теги будут корректно интерпретированы и отображены внутри тултипа, а не как текст.

Автоматическое удаление атрибута title

Чтобы избежать появления двойного тултипа (стандартного браузерного и Tooltipster), библиотека по умолчанию скрывает атрибут title после инициализации. Это поведение можно контролировать через опцию functionInit:

$('.tooltip').tooltipster({
    functionInit: function(instance, helper) {
        var content = $(helper.origin).attr('title');
        instance.content(content);
        $(helper.origin).removeAttr('title');
    }
});

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

Динамическое обновление содержимого из title

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

$('.tooltip').tooltipster({
    content: 'Изначальная подсказка'
});

// позже в коде
$('.tooltip').tooltipster('content', 'Обновлённая подсказка');

Если требуется, чтобы обновление происходило автоматически при изменении атрибута title, можно использовать наблюдатель MutationObserver:

$('.tooltip').each(function() {
    var element = this;
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.attributeName === 'title') {
                $(element).tooltipster('content', $(element).attr('title'));
            }
        });
    });
    observer.observe(element, { attributes: true });
});

Использование атрибута title с различными типами элементов

Tooltipster одинаково эффективно работает с кнопками, ссылками, изображениями и блоками div:

<a href="#" class="tooltip" title="Ссылка с подсказкой">Ссылка</a>
<img src="image.png" class="tooltip" title="Описание изображения" />
<div class="tooltip" title="Блок с информацией">Блок</div>

Для всех этих элементов достаточно инициализировать Tooltipster один раз через селектор класса .tooltip.

Настройка задержки и анимации

Используя атрибут title в качестве источника, можно дополнительно настраивать появление подсказки через опции:

$('.tooltip').tooltipster({
    delay: 200,           // задержка перед показом, мс
    animation: 'fade',    // тип анимации
    theme: 'tooltipster-shadow', // тема оформления
    contentAsHTML: true
});

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

Преимущества использования title

  1. Простота — не требуется дополнительный HTML-контент.
  2. Совместимость — стандартный атрибут title поддерживается всеми элементами HTML.
  3. Динамичность — легко обновлять содержимое через JS.
  4. Безопасность — Tooltipster автоматически скрывает стандартный браузерный tooltip, предотвращая наложение подсказок.

Использование атрибута title остаётся самым удобным способом добавления информационных подсказок в проектах с Tooltipster, особенно для быстрого прототипирования и стандартизированных интерфейсов.

Оглавление