Добавление всплывающей подсказки в тег SVG rect

какое лучшее решение для добавления всплывающей подсказки в <rect>?

Я создал карту SVG с несколькими <rect> теги, и я хотел бы показать подсказку при наведении мыши. Используя title атрибут в порядке, но есть ли какой-либо вариант, как изменить его с помощью CSS/Javascript/jQuery или есть еще лучший вариант для добавления всплывающей подсказки?

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">
    <g>
        <rect id="1" title="There's some text" x="0" y="0" fill="#666666" width="20" height="20"/>
        <rect id="2" title="There's another text" x="30" y="0" fill="#666666" width="20" height="20"/>
    </g>
</svg>
6
css html svg title tooltip

2 ответов

SVG использует элементы заголовка, а не атрибуты, вы не могу стиль, хотя их. Если вам нужен стиль, вам нужно будет создать заголовок динамически как <text> элемент и поместите его в нужное место с помощью javascript.

вот как выглядят подсказки по умолчанию...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve">
    <g>
        <rect id="1" fill="#666666" width="20" height="20">
          <title>There's some text</title>
        </rect>
        <rect id="2" x="30" fill="#666666" width="20" height="20">
          <title>There's another text</title>
        </rect>
   </g>
</svg>
11

Я пробовал ваш код, но он не работает (Chrome). Затем я нашел на этом сайте сообщение о всплывающей подсказке:

как добавить подсказку к svg-графику?

поэтому вместо добавления атрибута title вам нужно сделать следующее:

<rect id="1" x="0" y="0" fill="#666666" width="20" height="20"><title>"There's some text"</title/></rect>

обновление

вы можете изменить текст и стиль с помощью javascript и jquery

пример:

$("#1").find("title").html("Text")
0