Работа с SVG элементами

Tooltipster изначально разрабатывался для работы с HTML-элементами, такими как <div>, <span>, <button> и т. д. Однако интеграция с SVG требует некоторых особенностей, так как SVG элементы имеют иной DOM-поведение и события, чем стандартные HTML-элементы. Для начала необходимо убедиться, что библиотека подключена корректно:

<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>

SVG элементы должны быть обернуты в контейнер с атрибутом class или id, чтобы Tooltipster мог корректно их инициализировать. Например:

<svg width="200" height="200">
  <circle id="circle1" cx="50" cy="50" r="40" fill="blue" />
  <rect id="rect1" x="100" y="20" width="80" height="60" fill="green" />
</svg>

Инициализация Tooltipster для SVG элементов выглядит следующим образом:

$('#circle1').tooltipster({
    content: 'Это круг',
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200
});

$('#rect1').tooltipster({
    content: 'Это прямоугольник',
    theme: 'tooltipster-light',
    animation: 'grow',
    delay: 200
});

Особенности работы с SVG

  1. События мыши: SVG элементы часто используют события mouseenter и mouseleave для отображения всплывающих подсказок. Tooltipster автоматически обрабатывает эти события, но в случае сложных SVG с наложением элементов может потребоваться добавление pointer-events: all в CSS, чтобы элементы реагировали на курсор.

    svg * {
    pointer-events: all;
}

  2. Позиционирование подсказки: Tooltipster рассчитывает положение подсказки относительно элемента, но SVG может иметь трансформации (transform, scale, translate). Для корректного отображения рекомендуется использовать опцию functionPosition:

    $('#circle1').tooltipster({
    content: 'Круг с трансформацией',
    functionPosition: function(instance, helper, position){
        position.coord.top += 10; // смещение по вертикали
        position.coord.left += 5; // смещение по горизонтали
        return position;
    }
});

  3. Поддержка динамических SVG элементов: Если SVG создаётся динамически через JavaScript или D3.js, Tooltipster нужно инициализировать после вставки элемента в DOM:

    let newCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
newCircle.setAttribute('cx', 150);
newCircle.setAttribute('cy', 150);
newCircle.setAttribute('r', 30);
newCircle.setAttribute('fill', 'red');
newCircle.setAttribute('id', 'dynamicCircle');
document.querySelector('svg').appendChild(newCircle);

$('#dynamicCircle').tooltipster({
    content: 'Динамически добавленный круг',
    theme: 'tooltipster-noir'
});

Использование HTML-контента в подсказках

Tooltipster поддерживает как текст, так и HTML-контент. Для SVG элементов это особенно полезно для добавления сложных структур внутри подсказки:

$('#rect1').tooltipster({
    content: $('<div><strong>Прямоугольник</strong><br>Ширина: 80, Высота: 60</div>'),
    theme: 'tooltipster-punk',
    interactive: true
});

Опция interactive: true позволяет взаимодействовать с элементами внутри подсказки, например, кнопками или ссылками.

Анимации и темы

Для визуального соответствия SVG-элементам можно использовать различные темы и анимации Tooltipster:

  • animation: 'fade' — плавное появление/исчезновение.
  • animation: 'grow' — подсказка растёт от центра элемента.
  • theme: 'tooltipster-light' — светлая тема с минимальным оформлением.
  • theme: 'tooltipster-noir' — тёмная строгая тема для контрастных SVG.
$('#circle1').tooltipster({
    content: 'Круг с анимацией grow',
    theme: 'tooltipster-noir',
    animation: 'grow',
    delay: 150
});

Работа с множественными элементами SVG

Если нужно добавить подсказки на несколько элементов одновременно, можно использовать общий селектор:

$('svg circle, svg rect').tooltipster({
    content: 'Элемент SVG',
    theme: 'tooltipster-light',
    animation: 'fade',
    delay: 200
});

Для каждого элемента можно переопределять контент с помощью функции:

$('svg *').tooltipster({
    content: function() {
        return $(this).attr('id') ? 'ID: ' + $(this).attr('id') : 'SVG элемент';
    },
    theme: 'tooltipster-light',
    animation: 'fade'
});

Работа с масштабированием и viewBox

Если SVG имеет viewBox или изменяется масштаб через CSS (transform: scale()), подсказки могут смещаться. Чтобы сохранить корректное позиционирование, рекомендуется использовать опцию position: 'bottom' или функции functionPosition для точного расчета координат.

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

Оглавление