I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle.
To create the tooltip, I would like to utilize this specific plugin.
Here is how I have connected the SVG to HTML:
<object data="map.svg" type="image/svg+xml" id="map" width="1840" height="940"></object>
My initial attempt looked like this:
var svgobject = document.getElementById('map');
if ('contentDocument' in svgobject) {
var svgdom = $(svgobject.contentDocument);
$("#rect4578").tooltip.pop(this, '#ToltipContent');
}
Below is the code for the tooltip container:
<div style="display:none;">
<div id="ToltipContent">
<h2>Header</h2>
<img src="img/img.jpg" style="float:right;" />
Some text
</div>
</div>
I made sure to add the 'tooltip' class to the rect4578 as instructed on the plugin website. However, it did not work.
Then I attempted to invoke the plugin inside the onmouseover attribute of the SVG rectangle.
onmouseover="tooltip.pop('#rect4578', '#ToltipContent')"
Unfortunately, even this method did not produce any results.
However, changing the opacity of the rectangle using either method described above did work.
So my question is, what is the correct way to implement this plugin for creating tooltips within an SVG?
Thank you.