Question

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

导航栏位于div中，ID为“header”，而其他所有内容都位于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值，因此不会出现这种情况？由于工具提示使用绝对定位并且嵌套在也使用绝对定位的另一个元素中，因此它不能从父元素“突破”。

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

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

Answer 2

我终于能够通过将#header div设置为固定位置来固定它（所以它保持在窗口的顶部而没有绝对定位）并且我将#main div静态定位并将其向下移动而只有分页符

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

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

要查看完成的结果，请访问：ultimatemmo.webege.com

顶部的导航栏是我的标题div，其他一切都是我的主要div。

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

Qtip工具提示没有出现

2 个答案: