For my first JavaScript application I am building a widget based designer, and use a variety of widgets based on SVG included in the main HTML body with object tags. I'm trying to associate a bootstrap tooltip when the user clicks on the widget object, however I'm getting strange errors that don't crop up when using tooltips on other non object HTML elements.

As an object tag swallows mouse events it's not possible to trigger a tooltip with a hover and the only combination I can get to work to show the tooltip is the following code (nothing else works, bootstrap complains about ):

document.getElementById(widgetName).setAttribute("title", param0);
setTimeout(function () {
     $("#" + widgetName).tooltip("show");
     }, 1);              // attribute needs to be set after the next tick so the DOM is refreshed.
setTimeout(function () { $("#" + widgetName).tooltip("hide"); }, 2000); // 2 sec delay before hiding

This code shows the tooltip but errors out with Unable to get property 'originalTitle' of undefined or null reference in IE10 after the 2 second timeout to hide the tooltip. I can't use tooltip object options (eg. the delay option) as I get the same error. Same problem in Chrome although Chrome does not report the error (no hiding though).

I'm sure it has something to do with trying to use tooltips on object tags as tooltips work normally otherwise. However I'm fairly new to JavaScript so let me know if I'm doing something dumb, and the bootstrap/Jquery code is too complex for me to trace the error.

Using: HTML5, IE10, latest twitter bootstrap, visual studio 2012 web

Thanks for any help / pointers.

UPDATE: Added code that inserts the object into the DOM

    var objWidget = document.createElement("object");
    objWidget.type = "image/svg+xml";
    objWidget.data = "widgets/" + widgetFile + "." + widgetExt      // location of widget
    objWidget.className = "widget"
    var widgetName = "objWidget" + widgetNum;
    targetDiv = "widgetContainer"
    objWidget.id = widgetName;
    document.getElementById(targetDiv).appendChild(objWidget);   // Add to Div
    var objID = document.getElementById(widgetName);
    objID.addEventListener("load", function () {      // access properties once the file is loaded
        var objDoc = objID.contentDocument;
        objDoc.addEventListener("dragstart", drag_start, false);
        objDoc.addEventListener("dragover", drag_over, false)
        objDoc.addEventListener("drop", drop, false)
        objDoc.getElementById("widget").setAttribute("data-widgetName", widgetName);   // set a data attribute on the SVG that points to the parent object as object that created the event isn't recorded in the event.currentTarget
        objID.setAttribute("draggable", "true")
        objID.style.setProperty("position", "absolute");
        objID.style.setProperty("left", objLeft + "px");
        objID.style.setProperty("top", objTop + "px");
        objID.style.setProperty("z-index", widgets[widgetNum].zOrder);
        objDoc.defaultView.loaded(widgetName);         // run widget startup routine only if it isn't a new widget
        objDoc.defaultView.addEventListener("click", widgetClick, false);
        objDoc.defaultView.addEventListener("dblclick", widgetDblClick, false);
    }, false);