Тултип, – всплывающая подсказка при наведении курсора, есть во многих программных продуктах.
В 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 страницу
Следующая ⇛ Масштабирование векторных изображений
А кто вам мешает создать блок для подсказок и выводить его вместо стандартного? Тогда и стили будут.
Примерно так:
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();”
Будет стильно и красиво…