Плагин Tooltipster для работы с элементами в объектном файле SVG

Question

Плагин Tooltipster для работы с элементами в объектном файле SVG

Я использовал плагин Tooltipster для различных элементов на моем веб-сайте (рекомендую этот плагин), и я решил, что я хотел бы использовать его для элементов в объектном файле SVG, но оказалось, что это намного больше сложнее, чем казалось в первый раз.

Итак, на моей html-странице у меня есть объект:

<object style="width:100%; height:auto;" class="navmap" type="image/svg+xml" data="location.svg">
Stop using that old-ass Internet Explorer XD!!
</object>

Простой макет SVG ради этого вопроса (мои svgs огромны):

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="377.7px" height="377.7px" viewBox="0 0 377.7 377.7" enable-
background="new 0 0 377.7 377.7" xml:space="preserve">


<g>
    <circle fill="#898989" cx="188.85" cy="188.85" r="188.85"/>
</g>


<a xlink:href="#" target="_top" title="Give that circle a tooltip" 
class="tooltip">
    <g>
        <circle fill="#231F20" cx="186.2" cy="192.01" r="82.5"/>
    </g>
</a>

</svg>

Как работает Tooltipster:

Для тех из вас, кто не знаком с tooltipster, все, что вам нужно сделать, это назначить класс или идентификатор для плагина tooltipster, например, так:

<img src="my-image.png" class="tooltip" title="This is my image's 
tooltip message!" />

$(document).ready(function() {
        $('.tooltip').tooltipster();
});

Tooltipster будет использовать атрибут title элемента для всплывающей подсказки, как показано выше, ИЛИ вы можете использовать javascript для генерации сообщения всплывающей подсказки:

<img src="my-image.png" class="tooltip" />

$('.tooltip').tooltipster({ content: 'This is my image's 
tooltip message!' });

Слишком просто!

Вернуться к моей проблеме svg

Поэтому я пытаюсь заставить плагин tooltipster работать с элементом xlink в моем svg, НО оказывается, что использование этих общих методов не работает дляэлементов в объекте SVG.

Почему это?

Прежде всего,НЕОБХОДИМО ли связывать мой файл javascript с файлом SVG следующим образом (как вы бы сделали с внешней таблицей стилей)...

<script xlink:href="js/scripts.js" />

... для того, чтобы использовать javascript (и плагин tooltipster)? Я уже пробовал это, однако, и это не работает, но так как пока ничего не работает, я хотел бы знать, требуется ли ссылка на мой внешний файл js?ПРИМЕЧАНИЕ: я поместил плагин tooltipster в свой внешний файл js -scripts.js

Ничего, что я делаю, не работает! Я могу только предположить, что это...

$(document).ready(function() {
        $('.tooltip').tooltipster();
});

... не могу найти элемент в файле SVG.

Я собрал простую FIDDLE - пожалуйста, посмотрите.

Я провел свои исследования в Интернете, и нет никаких сообщений, связанных свсплывающими подсказками для элементов в объекте SVG, использующих плагин Tooltipster и "решения" для запросов других людей, которые не работают для моего случая.

Буду признателен за вашу помощь и руководство

ОБНОВИТЬ:

Я попробовал эту технику, найденную в Интернете, но я не знаю, правильно ли я это делаю, иначе я действительно сжимаю соломинки на данный момент:

window.onload=function() {
// Get the Object by ID
var svg = document.getElementById("circle-svg");
// Get the SVG document inside the Object tag
var svgDoc = svg.contentDocument;
// Get one of the SVG items by ID;
var circle = svgDoc.getElementById("tooltip");
// Set the colour to something else
circle.tooltipster();
};

Скрипка с использованием кода выше.

*ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ

Ах!!! (Спасибо Эвану) Я сделал такую любительскую ошибку и забыл включить библиотеку jquery в мою скрипку!! Но это все еще не решило мою проблему!

Хорошо, пожалуйста, смотрите обновленную скрипку:

HTML:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="377.7px" height="377.7px" viewBox="0 0 377.7 377.7" enable-
background="new 0 0 377.7 377.7" xml:space="preserve">


<g>
    <circle fill="#898989" cx="188.85" cy="188.85" r="188.85"/>
</g>


<a xlink:href="#" target="_top" title="Give that circle a tooltip" 
class="tooltip">
    <g>
    <circle fill="#231F20" cx="186.2" cy="192.01" r="82.5"/>
    </g>
 </a>

JS:

$('.tooltip').tooltipster();

Как вы можете видеть в скрипте, подсказка теперь работает на 100% нормально (это потому, что код SVG находится в HTML. Как только я связываю SVG в своем html как объект (как я делаю на моем сайте) вот так...

<object style="width:100%; height:auto;" class="navmap" 
type="image/svg+xml" data="location.svg">
Stop using that old-ass Internet Explorer XD!!
</object>

... подсказка не работает! Что мне не хватает? Как мне заставить javascript работать для атрибута title в xlink выше? Нужно ли помещать JavaScript в мой файл SVG или? Нужно ли как-то GetelementsbyID теперь, когда это объект?

Помощь высоко ценится еще раз

3

javascript jquery svg tooltip tooltipster

Источник

user3364730 01 ноя '15 в 22:23

1 ответ

Другие вопросы по тегам javascript jquery svg tooltip tooltipster

stiky 19 янв '23 в 11:18 2023-01-19 11:18 · Answer 1 · 2023-01-19 11:18

Кажется, это очень старая проблема, но по состоянию на январь 2023 года я все еще не мог найти простого решения.

Это может не полностью относиться к приведенному выше случаю, потому что я делаю веб-сайт с Python-Flask-Bootstrap. Я хотел сделать простую карту SVG , чтобы всплывающие подсказки отображались на адаптивном изображении.

Я попробовал tippy.js , но есть проблема , которую не так просто исправить, поэтому вместо этого переключился на всплывающую подсказку . У меня работает Tooltipster , но, к сожалению, он не находится в активной разработке.

С помощью tooltipster я получал сообщение об ошибке:

c.SVG не определен

Поэтому установил svg.js в соответствии с рекомендациями на сайте tooltipster, и он, наконец, заработал правильно.

Вот скрипты в моем блоке скриптов, относящиеся к tooltipster :

      <script type="text/javascript" src="{{ url_for('static', filename='node_modules/jquery/dist/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='node_modules/@svgdotjs/svg.js/dist/svg.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='node_modules/tooltipster/dist/js/tooltipster.bundle.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='node_modules/tooltipster/dist/js/plugins/tooltipster/SVG/tooltipster-SVG.min.js') }}"></script>

Наконец, изображение не отображалось на моем телефоне (iOS 16), поэтому мне в первую очередь понадобилась карта svg . Ничего не помогло, кроме добавленияposition: absoluteк<svg>тег, но это не помогло, потому что это испортило размер изображения. То, что на самом деле сделало трюк, изменило<div>класс изclass="container d-flex"кclass="container d-flex flex-column". Я не совсем уверен, почему это работает, но теперь он отображается так, как я предполагал, на всех устройствах. Вот как это выглядит:

      <div id="mainImageContainer" class="container d-flex flex-column">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 1181 2362">
    <image id="mainImage" xlink:href="{{ url_for('static', filename='leads/figure1_mobile.png') }}"></image>
    <a xlink:href="#">
      <rect x="238" y="2003" fill="#fff" opacity="0" width="294" height="198"></rect>
    </a>
    <a href="#" id="ekgPop" class="tipster">
      <rect x="155" y="1185" fill="#fff" opacity="0" width="205" height="247"></rect>
    </a>
    <a xlink:href="#">
      <rect x="808" y="1195" fill="#fff" opacity="0" width="205" height="244"></rect>
    </a>
    <a xlink:href="#">
      <rect x="663" y="2005" fill="#fff" opacity="0" width="288" height="197"></rect>
    </a>
  </svg>
</div>

Фаерфокс на рабочем столе

iPhone 12 мини (iOS16)