Подсказка jquery для пути к элементу svg

<path xmlns="http://www.w3.org/2000/svg" d="M477.63,166.84l0.51,0.9l0.33,0.14l0.9,-0.21l1.91,0.47l3.68,0.16l0.17,-0.05l1.2,-0.75l2.78,-0.67l1.72,1.05l1.02,0.24l-0.97,0.97l-0.91,2.17l0.0,0.24l0.56,1.19l-1.58,-0.3l-0.16,0.01l-2.55,0.95l-0.2,0.28l-0.02,1.23l-1.92,0.24l-1.68,-0.99l-0.27,-0.02l-1.94,0.8l-1.52,-0.07l-0.15,-1.72l-0.12,-0.21l-0.99,-0.76l0.18,-0.18l0.02,-0.39l-0.17,-0.22l0.33,-0.75l0.91,-0.91l0.01,-0.42l-1.16,-1.25l-0.18,-0.89l0.24,-0.27Z" 
    data-code="BG" 
    fill="#cecdcd" 
    fill-opacity="1" 
    stroke="none" 
    stroke-width="0" 
    stroke-opacity="1" 
    fill-rule="evenodd" 
    id="test" 
    title="this as tool-tip" 
    class="jvectormap-region jvectormap-element"/>

Мне нужно это значение атрибута title в качестве всплывающей подсказки. Я пробовал с ниже, но ничего не произошло.

$("path", svgRoot).mouseover(function() {
    //var content = $(this).attr("title");
    var id = $(this).attr("id");
    if (id != undefined) {
        $(this).tooltip();
    }
});

svg jquery tooltip jquery-svg jquery-ui-tooltip
person siby    schedule 04.09.2013    source источник
comment
Вы включили какие-либо плагины всплывающей подсказки?   -  person Rory McCrossan    schedule 04.09.2013
comment
да, я включил код ‹link rel=stylesheet href=. jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css› ‹script src=code.jquery.com/jquery-1.9.1.js›‹/script› ‹script src=code.jquery.com/ui/1.10.3/jquery-ui.js›‹/script›   -  person siby    schedule 04.09.2013
comment
Правильно ли он извлекает id? Прошло некоторое время, но я думаю, что помню, что jquery не может получить attr узлов SVG. РЕДАКТИРОВАТЬ: Извините, я только что посмотрел на часть моего старого кода и его addClass и removeClass, которые не работают на узлах SVG. attr должно работать   -  person zgood    schedule 04.09.2013
comment
нет проблем с идентификатором, я создал объект для svg   -  person siby    schedule 04.09.2013
comment
@RoryMcCrossan спасибо за редактирование моего кода   -  person siby    schedule 04.09.2013

Ответы (1)


arrow_upward
1
arrow_downward

В SVG всплывающая подсказка не представлена ​​атрибутом title, вместо этого вам нужен дочерний элемент <title>.

т.е. в то время как всплывающая подсказка HTML выглядит так:

<p title="title">This is a paragraph.</p>

всплывающая подсказка SVG будет выглядеть так:

<text y="50"><title>This is the tooltip</title>This is some text<text>

или в вашем случае

<path xmlns="http://www.w3.org/2000/svg" d="M477.63,166.84l0.51,0.9l0.33,0.14l0.9,-0.21l1.91,0.47l3.68,0.16l0.17,-0.05l1.2,-0.75l2.78,-0.67l1.72,1.05l1.02,0.24l-0.97,0.97l-0.91,2.17l0.0,0.24l0.56,1.19l-1.58,-0.3l-0.16,0.01l-2.55,0.95l-0.2,0.28l-0.02,1.23l-1.92,0.24l-1.68,-0.99l-0.27,-0.02l-1.94,0.8l-1.52,-0.07l-0.15,-1.72l-0.12,-0.21l-0.99,-0.76l0.18,-0.18l0.02,-0.39l-0.17,-0.22l0.33,-0.75l0.91,-0.91l0.01,-0.42l-1.16,-1.25l-0.18,-0.89l0.24,-0.27Z" 
    data-code="BG" 
    fill="#cecdcd" 
    fill-opacity="1" 
    stroke="none" 
    stroke-width="0" 
    stroke-opacity="1" 
    fill-rule="evenodd" 
    id="test" 
    class="jvectormap-region jvectormap-element">
    <title>this as tool-tip</title>
</path>

Вам не нужен jquery, и он все равно не будет работать для всплывающих подсказок SVG.

person Robert Longson    schedule 04.09.2013