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

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

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

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

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

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

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

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


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

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

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