Qtip提示没有出现

Question

我所做的导航栏上我的网页静态的顶部（在页面的其余部分是动态的）

导航栏是在给定的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 }); 
    }); 
}); 

那么这是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

我终于能由#header div充满设定为固定的定位（因此它停留在没有绝对定位的窗口的顶部）来固定它，我提出的#main DIV静态定位和移动它只是分页。

*我决定只使用一种类型的工具提示会更有效率，所以我删除了一个。 *请注意我是如何设置最小高度的，这样我可以显示当您滚动时#header div如何停留在顶部，这就是我想要的效果。

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

看到最终结果了，去这里：ultimatemmo.webege.com

在顶部导航栏是我的头股利和其他一切是我的主要股利。

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

Answer 2

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

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

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