Тултип, – всплывающая подсказка при наведении курсора, есть во многих программных продуктах.
В svg тултип реализуется с помощью парного тега <title> Текст подсказки </title>
Чтобы тултип начал показываться при наведении курсора на объект, необходимо объект обернуть групповыми тегами <g>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<g> <title>Первый атом</title> <circle cy="-44" r="9"/> </g> <g> <title>Второй атом</title> <circle cx="40" cy="18" r="9"/> </g> <g> <title>Третий атом</title> <circle cx="-40" cy="18" r="9"/> </g> |
При наведении на каждую окружность, элипс и удержания курсора некоторое время на объекте, должна появиться всплывающая подсказка для этого объекта.
Ноу-хау, которым поделюсь с вами.Многострочный тултип реализуется с помощью вложенных друг в друга тегов <title>
Структура вложения следующая:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<g> <title> <title> ⧉ Свойства атома </title> <title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title> <title> Название: кислород </title> <title> Атомная масса (молярная масса) :15,99903 </title> <title> Радиус атома 60 (48) пм </title> <title> ⧉ Химические свойства </title> <title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title> <title> Ковалентный радиус 73 пм </title> <title> Радиус иона 132 (-2e) пм </title> <title> Электродный потенциал 0 </title> <title>⧉Термодинамические свойства простого вещества </title> <title> ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ </title> <title>Плотность (при н. у.) газ: 1,42897 кг/м³ </title> <title>Температура плавления 54,8 К (-218,35 °C) </title> <title>Температура кипения 90,19 К (-182,96 °C) </title> </title> <circle fill="#80a3cf" r="13"/> </g> |
Внутрь первой пары <title>, которая идёт без текста вкладываются последовательно парные теги <title> с текстом ….. </title>. Каждая пара отвечает за свою отдельную строку многострочного тултипа
Допускается добавлять символы Unicode.
В примере ниже я добавил в заголовки символ сдвоенного прямоугольника – ⧉ и несколько символов unicode отображающие черту, для визуального разделения заголовков и остального текста ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
⇚ Как добавить SVG в HTML5 страницу
Следующая ⇛ Масштабирование векторных изображений