Многострочный tooltip в SVG

Тултип, – всплывающая подсказка при наведении курсора, есть во многих программных продуктах.
В svg тултип реализуется с помощью парного тега <title> Текст подсказки </title>

Чтобы тултип начал показываться при наведении курсора на объект, необходимо объект обернуть групповыми тегами <g>

К сожалению тултипы не подлежат стилизации: невозможно изменить цвет, размер шрифта и другие текстовые атрибуты
Пример однострочного тултипа

При наведении на каждую окружность, элипс и удержания курсора некоторое время на объекте, должна появиться всплывающая подсказка для этого объекта.

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

Многострочный тултип реализуется с помощью вложенных друг в друга тегов <title>
Структура вложения следующая:

Внутрь первой пары <title>, которая идёт без текста вкладываются последовательно парные теги <title> с текстом ….. </title>. Каждая пара отвечает за свою отдельную строку многострочного тултипа
Допускается добавлять символы Unicode.
В примере ниже я добавил в заголовки символ сдвоенного прямоугольника – ⧉ и несколько символов unicode отображающие черту, для визуального разделения заголовков и остального текста ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯


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

⇚ Как добавить SVG в HTML5 страницу
Следующая ⇛  Масштабирование векторных изображений

Многострочный tooltip в SVG: комментарий

  1. А кто вам мешает создать блок для подсказок и выводить его вместо стандартного? Тогда и стили будут.
    Примерно так:

    function showTooltip(evt, text) {
    let tooltip = document.getElementById(“tooltip”);
    tooltip.innerHTML = text;
    tooltip.style.display = “block”;
    tooltip.style.left = evt.pageX + 10 + ‘px’;
    tooltip.style.top = evt.pageY + 10 + ‘px’;
    }

    function hideTooltip() {
    var tooltip = document.getElementById(“tooltip”);
    tooltip.style.display = “none”;
    }

    #tooltip {
    background: cornsilk;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    z-index:999999;
    }

    В самом SVG к элементу надо добавить вызов функций по событию:
    onmousemove=”showTooltip(evt, ‘Это моя подсказка’);” onmouseout=”hideTooltip();”
    Будет стильно и красиво…

Добавить комментарий