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/