使用HTML5 <object>元素</object>手动隐藏twitter引导工具提示时出错

时间:2013-06-16 10:12:53

标签: javascript html5 object twitter-bootstrap

对于我的第一个JavaScript应用程序,我正在构建基于小部件的设计器,并使用基于主要HTML主体中包含的SVG的各种小部件和对象标记。我试图在用户点击widget对象时关联一个bootstrap工具提示,但是当我在其他非对象HTML元素上使用工具提示时,我会遇到奇怪的错误。

当一个对象标签吞下鼠标事件时,不可能用悬停触发工具提示,我可以用来显示工具提示的唯一组合是以下代码(没有其他工作,bootstrap抱怨):

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

此代码显示工具提示但错误输出在隐藏工具提示后2秒超时后,IE10中无法获取未定义或空引用的属性'originalTitle'。我不能使用工具提示对象选项(例如延迟选项),因为我得到相同的错误。 Chrome中的问题虽然Chrome没有报告错误(但没有隐藏)。

我确信它与尝试在对象标签上使用工具提示有关,因为工具提示正常工作。但是我对JavaScript很新,所以让我知道如果我做了一些愚蠢的事情,并且bootstrap / Jquery代码对我来说太复杂了,无法追踪错误。

使用:HTML5,IE10,最新的twitter bootstrap,visual studio 2012 web

感谢您提供任何帮助/指示。

更新:添加了将对象插入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);

1 个答案:

答案 0 :(得分:1)

我测试你的代码(将工具提示添加到svg标签)请参阅:http://bootply.com/64598 FF和chrome没有问题