javascript - anchor 超出正常流时不显示工具提示

Question

在我的网站上，我使用 class="trigger"的 DOM 节点作为工具提示的 anchor 。当鼠标悬停在这些 anchor 上时，会显示一个工具提示。生成工具提示容器的jQuery代码如下:

$('.trigger').mouseover(function() // OnMouseOver event
{
    $("<div/>", {
        id: "tooltip",
        css: {
            display: "none",
            position: "absolute",
            border: "3px solid #111",
            color: "#000",
            padding: "5px",
            opacity: 1.0,
            fontSize: "15pt",
            backgroundColor: "#fff",
            borderRadius: "15px",
            zIndex: 3000
        }
    }).appendTo(this);

    $("#tooltip").html($(this).attr('title'));
    $(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
    $('#tooltip').show(); // show the tooltip
}).mousemove(function(e) // OnMouse mode event
{
    $('#tooltip').css('top', e.pageY + 20); // tooltip 20px below mouse poiunter
    $('#tooltip').css('left', e.pageX - 20);    // tooltip with mouse pointer   
}).mouseout(function() // OnMouseOut event
{
    $(this).attr('title',$('#tooltip').html()); // set the title back to initial value
    $(this).children('div#tooltip').remove();   // get rid of the tooltip container 
});

当 anchor 位于页面的正常流中时效果很好，但当 anchor 不在页面流中时它不会显示

$("<img/>", {
    id: "arrowup",
    class: "trigger noprint",
    css:{
        display:"none",
        position:"fixed",
        bottom:'15px',
        right:'10px',
        cursor: "pointer"
    },
    src:"../images/arrowup.jpe",
    alt:"vers le haut",
    title: "Haut de la page",
    click:function(){
        $("html, body").animate({scrollTop: "0px"}, 800);
        return false;                       
        }
    }).appendTo("body");
$(window).bind("scroll", function() {
    var obj = $("#arrowup");

    if ($(this).scrollTop() > 300){ 
        obj.fadeIn(800);
    } else { 
        obj.fadeOut(800);
    }
});

这是正常行为还是有技巧可以让工具提示正常显示？

Answer 1

如果我对你的问题理解正确，你需要用固定的 div 包裹你的图像:

<div class="fixed">
    <img src="http://placehold.it/150x150">
    <div class="tooltip">Tooltip</div>
</div>

和 CSS:

.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.tooltip {
    position: absolute;
    left: -50px;
    top: 0;
    display: none;
}

.fixed:hover .tooltip {
    display: block;
}

检查JSFiddle

将鼠标悬停在占位符上以查看工具提示。