Javascript Qtip工具提示不显示

我将页面顶部的导航栏设置为静态，而页面的其余部分为动态

导航栏位于给定ID标头的div中，其他所有内容都位于具有ID main的div中

我使用此代码生成工具提示

这是Javascript/jquery/qtip

$(document).ready(function() {
//Tooltips
    $(".tiptrigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
   });
});

$(document).ready(function() {
//Tooltips
    $(".tipheader").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 30; //Get X coodrinates
        var mousey = e.pageY + -20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

这是调用工具提示的HTML。 第一行是主节，第二行是收割台

<a href="LINK URL" class="tiptrigger"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>
<a href="LINK URL" class="tipheader"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>

我之所以使用两个不同的javascript部分，是因为标题中的工具提示和主部分中的工具提示需要不同的参数

---

现在，问题是工具提示在标题中运行良好，但在主要部分不起作用，我想不出任何可能的原因，我尝试了我能想到的一切，但都不起作用。其他人知道如何修复它吗？

您是否需要在div元素上进行绝对定位？因为您没有指定任何顶部或左侧值，所以它不会显示为绝对定位？由于工具提示使用绝对定位，并且嵌套在另一个也使用绝对定位的元素中，因此无法从父元素中分离出来

我建议您从标题和主样式中删除position:absolute规则。或者，从标题样式中删除overflow:auto规则似乎也可以

---

我最终能够通过将header div设置为fixed positioning来修复它，这样它就可以保持在窗口顶部，而无需绝对定位。我将主div设置为static positioning，并仅通过分页符将其向下移动

*我决定只使用一种工具提示会更有效，所以我删除了一种。 *请注意我是如何设置最小高度的，以便在滚动时显示页眉div是如何保持在顶部的，这就是我想要的效果

要查看完成的结果，请转到此处：ultimatemmo.webege.com

顶部的导航栏是我的头球div，其他的都是我的主div

---

注意：那个网站不是一个正常的流量网站，我是为一个学校项目做的，现在它只是一个我不断改进的个人项目。它出现在internet上的唯一原因是我的朋友和女朋友可以看到我的进度。

您不需要两个$document.ready函数。似乎对我有用：您可以验证.tiptrigger元素的事件处理程序是否正在启动吗？也许可以在函数中放置几个console.log语句。然后，您可以开始将其缩小到javascript、CSS或标记问题。@Jack，好的，我更改了它，使它只有一个$document.ready，但仍然不起作用。@RocooC5。我该怎么做？我对控制台一无所知。log@RoccoC5另外，我编辑了JSFIDLE以包含上面解释的main和header div，现在它不起作用，但我不知道为什么。谢谢，这确实有效，但关键是我不能取消绝对位置，这会完全改变我的页面，我需要找到一种方法使工具提示与绝对位置上的div一起工作哇，我刚刚注意到工具提示确实显示在主部分，它只是比它应该的高出很多。你能想出任何解释吗？我知道了，我把标题div固定了，把主节相对定位了，然后它工作得很好=谢谢你让我知道问题出在绝对定位上

<a href="LINK URL" class="tiptrigger"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>
<a href="LINK URL" class="tipheader"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>