JQuery UI Tooltip not working with SVG within <Iframe> or <object> tag

JQuery UI Tooltip not working with SVG within <Iframe> or <object> tag

Hello all,

I have successfully been able to use the JQuery UI Tooltip with an SVG image when the image is embedded directly into my HTML page. However, when the SVG is loaded in an IFrame or Object tag, the tooltips don't show, even though the content callback is fired every time I hover on the elements.I have been searching all over the internet for a couple of days without finding any information pertaining to this issue. I hope you guys can help me out.

Here is an example of what I'm doing:

  1. HTML reference to SVG file:
  2. <object type="image/svg+xml" id="myTestObjectTag" data="mySVGFile.svg></object>


  1. JQuery:
  2. $(window).load(function () {
            var $root = $($("#myTestObjectTag").get(0).contentDocument).children().first();
            $root.find("a").each(function () { 
  3. $(this).tooltip({
            items: ":not([disabled])",
            track: true,
            position: {
                my: "left top+20 center",
                at: "right center" } ,
             content: function () { return "some html to be returned"; }

        });     
  4. });
        });