Javascript Firefox中的HTML位置问题（适用于IE和Chrome）

我有以下代码。当我将鼠标移到“代码”上时，它应显示位置100 X100上的div。它在IE和Chrome中工作良好；但是，div不会移动到Firefox中所需的位置。为了使它工作，需要改变什么

注意：我使用以下代码定位div

$('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

--完整代码--

试验
.工具提示
{
背景颜色：橙色；
位置：绝对位置；
边框样式：实心；
边框宽度：2倍；
边框底部：纯色2px黑色；
}
函数showDiv（批处理ID、供应商ID）{
tooltip.style.display=“块”；
batch.innerHTML=batchId；
vendor.innerHTML=vendorId；
$（'#工具提示'）.css（{左：100+“px”，上：100+“px”，位置：“绝对”}）
}
缅因人
次要的
代码
101
999999991
55789
主Id:
第二个Id:

要使“绝对”作为元素的位置，父元素的位置必须设置为相对或绝对。

---

这就是在您的示例中，将css“position:relative”添加到具有onmouseover事件的TD中。

jQuery css方法应按以下方式使用：

$("#something").css(propertyName,value);

$("#something").mouseover(function() {
    $("#tooltip").css("display","block");
  });

以这种方式处理脚本中的事件更好：

$("#something").css(propertyName,value);

$("#something").mouseover(function() {
    $("#tooltip").css("display","block");
  });

为了绝对定位一个元素，它的父元素应该相对定位

这样试试

                <script type="text/javascript">
            function showDiv(batchId, vendorId) {
                document.getElementById('tooltip').style.display = "block";
                document.getElementById('batch').innerHTML = batchId;
               // batch.innerHTML = batchId;
                document.getElementById('vendor').innerHTML = vendorId;
                //vendor.innerHTML = vendorId;
            }

        </script>

函数showDiv（批处理ID、供应商ID）{
document.getElementById（'tooltip'）.style.display=“block”；
document.getElementById（'batch'）。innerHTML=batchId；
//batch.innerHTML=batchId；
document.getElementById（'vendor'）。innerHTML=vendorId；
//vendor.innerHTML=vendorId；
}

下面是一个演示代码的JSFIDLE

根据firebug的说法，问题在于您的脚本。您引用了一个未定义的变量“tooltip”。Chrome和IE似乎接受了这个错误并继续下去，而firefox则窒息而死

更改此项：

 function showDiv(batchId, vendorId) {

    tooltip.style.display = "block";

    batch.innerHTML = batchId;

    vendor.innerHTML = vendorId;

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

} 

为此：

function showDiv(batchId, vendorId) {

    $('#tooltip').css('display',"block");

    $('#batch').html(batchId);

    $('#vendor').html(vendorId);

    $('#tooltip').css({ left: 100 + "px", top: 100 + "px", position: "absolute" })

}

---

编辑：我知道jQuery css函数在$（“#工具提示”）上被调用了两次。我试图尽可能地保持相同的代码流：）

Lijo对.css（）的使用是有效的。它允许您一次设置多个样式特性。但是，是的，编码的事件绑定比声明的要好。这有利于您创建概念证明，也有利于那些试图理解您的问题的人。“保存”后，可以粘贴到链接中。位置：绝对；指除静态（相对或绝对，不确定与固定父项和绝对子项的交互）位置之外的第一个父项。如果未找到父元素，则该元素将相对于视口定位。所以，如果他想将代码定位到视口中，他的代码就可以工作。我想它不应该定位到视口中，因为它是UI元素的工具提示。这可能是真的。有jquery库和其他辅助工具用于相对于特定元素定位它。是一个很好的工具提示。你能回答吗？你能回答吗