用于处理 SVG object 文件中元素的工具提示插件

Question

I've been using the Tooltipster plugin for various elements on my website (recommend this plugin btw) and I've decided that I'd like to use it on elements within an SVG object file but this is turning out to be a lot more difficult than first thought.

So on my html page, I have the object:

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

A simple SVG mockup for the sake of this question (my svgs are huge):

<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> 

How Tooltipster works:

For those of you who aren't familiar with tooltipster, all you have to do is assign a class or id to the tooltipster plugin, like so:

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

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

and Tooltipster will use the title attribute of an element for the tooltip as shown above OR you can use javascript to generate the tooltip message:

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

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

Dead simple!!

Back to my svg issue

So I'm trying to get the tooltipster plugin to work on the a xlink element in my svg BUT it turns out that using those general methods above doesn't work for elements within an SVG object .

Why is this?

First off, do I NEED to link my javascript file in the SVG file like so (like you would do with an external style sheet)...

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

... in order for it to make use of javascript (and tooltipster plugin)? I've tried this already however and it doesn't work but since nothing has worked yet so far, I'd like to know if linking to my external js file is required? NOTE: I've put the tooltipster plugin into my external js file being - scripts.js

Nothing I do is working. I can only assume that this...

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

... cannot find the element in the SVG file.

I've put together a simple FIDDLE - please take a look.

I've done my research online and there aren't any posts related to Tooltips for elements in an SVG object using the-Tooltipster plugin and "solutions" for other peoples queries ain't working for my case.

I'd appreciate your help and guidance

UPDATE:

I've tried this technique found online but I don't know if I'm doing this correct otherwise I'm really clutching straws at the moment:

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();
};

Fiddle using code above.

*LATEST UPDATE

Ah!!! (Thanks to Evan) I made such an amateur mistake and forgot to include jquery library in my fiddle!! But this still hasn't solved my problem!

Okay so please see updated Fiddle :

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();

As you can see in the fiddle, the tooltip works 100% fine now (this is because the SVG code is IN the HTML. As soon as I link the SVG in my html as an OBJECT (Like I'm doing on my website) like so...

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

... the tooltip doesn't work? What am I missing? How do I get the javascript to work for the title attribute in the xlink above? Do I need to put the javascript IN my SVG file or? Do I need to somehow GetelementsbyID now that it's an object?

Help much appreciated once again

Answer 1

This seems to be a very old issue but I still couldn't find a simple solution as of Jan 2023.

This may not completely apply to the case above because I am making a website with Python-Flask-Bootstrap. I wanted to make a simple SVG map in order to make tooltips show on a responsive image.

I tried tippy.js but there is an issue that didn't seem very easy to fix so switched to tooltipster instead. Tooltipster works for me but it seem not to be in active development unfortunately.

With tooltipster I was getting an error message:

c.SVG is undefined

So installed svg.js as recommended on tooltipster's site and it finally started working properly.

Here are the scripts in my scripts block relevant to 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>

Finally, the image was not displaying on my phone (iOS 16) which was why I needed a svg map in the first place. Nothing really helped apart from adding position: absolute to the <svg> tag but that wasn't helpful because it messed up the picture size. What actually did the trick was changing the <div> class from class="container d-flex" to class="container d-flex flex-column" . I am not exactly sure why that works but it is now displaying as I intended on all devices. Here is how it looks:

<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>

Firefox on desktop

iPhone 12 mini (iOS16)