Как правильно задать tooltip в SVG с помощью JS

241
27 декабря 2017, 22:35

Как правильно задать tooltip в SVG с помощью JS, если SVG добавляется через <object>, и элементы SVG имеют только id и не имеют <title>?

    <div class="box-body">
        <center>
            <object id="idImageSVG" class="svgClass" type="image/svg+xml" data="./img/exoModel.svg">
                Your browser does not support SVG
            </object>
        </center>
    </div>
$(window).load(function ()
{
    g_SvgModel = document.getElementById("idImageSVG");
    var svgDoc = g_SvgModel.contentDocument;
    g_SvgDrive1 = svgDoc.getElementById("drive1");
}
function updateSysInfo() {
    $.ajax({
        url: '/api/dashboard/states',
        type: 'GET',
        success: function (res) {
            if (res.err) {
                setTimeout(updateSysInfo,1000);
            } else {
                if (g_SvgTooltipDrive1 != null)
                {
                    var tooltip = document.createElementNS("http://www.w3.org/2000/svg",'title');
                    tooltip.innerHTML = 'текст тул-типа';
                    g_SvgTooltipDrive1.setAttribute('textContent', '11111');
                }
                setTimeout(updateSysInfo,1000);
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            notifyError(thrownError);
        }
    });
}
Answer 1

Как то так:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"> 
  <g> 
    <circle cx="20" cy="20" r="20"/> 
    <title>Его тул-тип</title> 
  </g> 
</svg>

Положить title в одну группу с элементом.

Если это надо делать через JS то создаёте title програмно

let tooltip = document.createElementNS("http://www.w3.org/2000/svg",'title');
tooltip.innerHTML = 'текст тул-типа';

И потом добавляете в группу к элементу.

EDIT:

Если g_SvgDrive1 является группой то просто сделайте:

g_SvgDrive1.appendChild(tooltip);
READ ALSO
Ошибка в подгрузке чанков, что не так?

Ошибка в подгрузке чанков, что не так?

Добрый день всем! Есть проблема, и никак не могу найти решения, тк

282
Сброс кеш при работе с javascript

Сброс кеш при работе с javascript

Доброго времениПри работе с сайтом через ftp иногда приходится чистить кэш что бы увидеть результат, чаще всего это требуется если добавил...

218
Обращение к элементу по id

Обращение к элементу по id

Обычно в литературе для доступа к элементу рекомендуют использовать documentgetElementById("id_")

320
Почему перебор элементов не работает по кругу

Почему перебор элементов не работает по кругу

Суть такаяПросто жму на кнопку "next", запускается цикл, цикл перебирает элементы

230