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
