Qtip 工具提示未出现

Question

我将页面顶部的导航栏设为静态（页面的其余部分是动态的）。

导航栏位于 ID 为“header”的 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 });
    });
});

然后这是 CSS

.tip {
    color: #fff;
    background: #1d1d1d;
    display: none; /*--Hides by default--*/
    padding: 10px;
    position: absolute;    
    z-index: 1000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    }

这是调用工具提示的 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 部分的原因是因为标头中的工具提示和主部分中的工具提示需要不同的参数。

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

Answer 1

您是否需要在 div 元素上进行绝对定位（由于您没有指定任何 top 或 left 值，因此不会出现这种情况）？由于工具提示使用绝对定位并且嵌套在另一个也使用绝对定位的元素中，因此它无法从父元素中“脱离”。

我建议您从 #header 和 #main 样式中删除 position:absolute 规则。或者，从 #header 样式中删除 overflow: auto 规则似乎也有效。

http://jsfiddle.net/tz59G/3/

Answer 2

我终于能够通过将 #header div 设置为固定定位来修复它（因此它保留在窗口的顶部，而没有绝对定位），并且我将 #main div 静态定位并仅通过分页符将其向下移动。

*我认为仅使用一种类型的工具提示会更有效，因此我删除了一种。
*注意我如何设置最小高度，以便我可以显示滚动时 #header div 如何保持在顶部，这就是我想要的效果。

http://jsfiddle.net/tz59G/5/

要查看最终结果，请转到此处：ultimatemmo .webege.com

顶部的导航栏是我的标题 div，其他所有内容都是我的主 div。

注意：该网站不是一个普通的流量网站，我为一个学校项目制作了它，现在它只是一个我不断改进的个人项目。它出现在互联网上的唯一原因是我的朋友和女朋友可以看到我的进展。