Javascript 当锚点超出正常流量时，工具提示不显示

在我的站点上，我使用class=“trigger”的DOM节点作为工具提示的锚。当move悬停在这些锚点上时，将显示工具提示。生成工具提示容器的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 
});

$("#template").on("mouseover", ".trigger", function(){ // OnMouseOver event

    $("<div/>", {
        id: "tooltip",
        css: {
            display: "block",
            position: "absolute",
            border: "3px solid #111",
            color: "#000",
            padding: "5px",
            opacity: 1.0,
            fontSize: "15pt",
            title: "XXX",
            backgroundColor: "#fff",
            borderRadius: "15px",
            zIndex: 3000
        }
    }).appendTo("body");

    $("#tooltip").html($(this).attr('title'));
    $(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
    $('#tooltip').show(); // show the tooltip
}).on("mousemove", ".trigger", 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   
}).on("mouseout", ".trigger", function(){ // OnMouseOut event
    $(this).attr('title',$('#tooltip').html()); // set the title back to initial value
    $("body").children('div#tooltip').remove(); // get rid of the tooltip container 
});

$（'.trigger'）.mouseover（function（）//OnMouseOver事件
{
$("", {
id:“工具提示”，
css:{
显示：“无”，
位置：“绝对”，
边框：“3px实心#111”，
颜色：“000”，
填充：“5px”，
不透明度：1.0，
字体大小：“15磅”，
背景颜色：“fff”，
边界半径：“15px”，
zIndex:3000
}
}).附于（本）；
$（“#工具提示”）.html（$（this.attr（'title'））；
$（this.attr（'title'，“”）；//清空定位点的title属性（避免默认浏览器反应）
$（“#工具提示”）.show（）；//显示工具提示
}).mousemove（函数（e）//OnMouse模式事件
{
$（“#工具提示”）.css（'top'，e.pageY+20）；//工具提示鼠标指针下方20px
$（'#tooltip'）.css（'left'，e.pageX-20）；//带有鼠标指针的工具提示
}).mouseout（函数（）//OnMouseOut事件
{
$（this.attr（'title'，$（'#tooltip'）.html（）；//将标题设置回初始值
$（this）.children（'div#tooltip'）.remove（）；//除去工具提示容器
});

当锚定位于页面的正常流中时，它工作得非常好，但当锚定位于流之外时，它不会显示，如中所示

$("<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);
    }
});

$（“300”）{
法代因（800）；
}否则{
目标衰减（800）；
}
});

---

这是正常的行为还是有办法让工具提示正常显示？

当您在加载dom后向页面动态添加内容时，需要让javascript知道您已经这样做了

这是通过事件传播完成的。如果触发器包含在父div中，请执行以下操作：

$('#parent').on('mouseover', '.trigger', function() {

//your code here.

});

---

如果我没弄错你的问题，你需要用fixed

div来包装你的图像：


工具提示

和CSS：

。已修复{
位置：固定；
底部：20px；
右：20px；
}
.工具提示{
位置：绝对位置；
左：-50px；
排名：0；
显示：无；
}
。修复：悬停。工具提示{
显示：块；
}

检查
将鼠标悬停在占位符上以查看工具提示。
以下代码有效

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

    $("#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
    $("body").children('div#tooltip').remove(); // get rid of the tooltip container 
});

$（'.trigger'）.mouseover（函数（）{//OnMouseOver事件
$("", {
id:“工具提示”，
css:{
显示：“块”，
位置：“绝对”，
边框：“3px实心#111”，
颜色：“000”，
填充：“5px”，
不透明度：1.0，
字体大小：“15磅”，
标题：“XXX”，
背景颜色：“fff”，
边界半径：“15px”，
zIndex:3000
}
}).附于（“主体”）；
$（“#工具提示”）.html（$（this.attr（'title'））；
$（this.attr（'title'，“”）；//清空定位点的title属性（避免默认浏览器反应）
$（“#工具提示”）.show（）；//显示工具提示
}).mousemove（函数（e）//OnMouse模式事件
{
$（“#工具提示”）.css（'top'，e.pageY+20）；//工具提示鼠标指针下方20px
$（'#tooltip'）.css（'left'，e.pageX-20）；//带有鼠标指针的工具提示
}).mouseout（函数（）//OnMouseOut事件
{
$（this.attr（'title'，$（'#tooltip'）.html（）；//将标题设置回初始值
$（“body”）.children（'div#tooltip'）.remove（）；//清除工具提示容器
});

请注意，对它所做的唯一修改是div#工具提示现在位于主体中，而不是作为其锚点的子项

为什么会这样？我真的不知道。
在我的网站上，我使用class=“trigger”的DOM节点作为工具提示的锚。当move悬停这些锚时，工具提示会随着鼠标的移动而显示和移动。生成工具提示容器的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 
});

$("#template").on("mouseover", ".trigger", function(){ // OnMouseOver event

    $("<div/>", {
        id: "tooltip",
        css: {
            display: "block",
            position: "absolute",
            border: "3px solid #111",
            color: "#000",
            padding: "5px",
            opacity: 1.0,
            fontSize: "15pt",
            title: "XXX",
            backgroundColor: "#fff",
            borderRadius: "15px",
            zIndex: 3000
        }
    }).appendTo("body");

    $("#tooltip").html($(this).attr('title'));
    $(this).attr('title',''); // empty the title attribute of the anchor (avoiding default browser reaction)
    $('#tooltip').show(); // show the tooltip
}).on("mousemove", ".trigger", 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   
}).on("mouseout", ".trigger", function(){ // OnMouseOut event
    $(this).attr('title',$('#tooltip').html()); // set the title back to initial value
    $("body").children('div#tooltip').remove(); // get rid of the tooltip container 
});

$（“#模板”）.on（“mouseover”，“.trigger”，function（）{//OnMouseOver事件
$("", {
id:“工具提示”，
css:{
显示：“块”，
位置：“绝对”，
边框：“3px实心#111”，
颜色：“000”，
填充：“5px”，
不透明度：1.0，
字体大小：“15磅”，
标题：“XXX”，
背景颜色：“fff”，
边界半径：“15px”，
zIndex:3000
}
}).附于（“主体”）；
$（“#工具提示”）.html（$（this.attr（'title'））；
$（this.attr（'title'，“”）；//清空定位点的title属性（避免默认浏览器反应）
$（“#工具提示”）.show（）；//显示工具提示
}).on（“mousemove”，.trigger），函数（e）{//OnMouse模式事件
$（“#工具提示”）.css（'top'，e.pageY+20）；//工具提示鼠标指针下方20px
$（'#tooltip'）.css（'left'，e.pageX-20）；//带有鼠标指针的工具提示
}).on（“mouseout”，“.trigger”，function（）{//OnMouseOut事件
$（this.attr（'title'，$（'#tooltip'）.html（）；//将标题设置回初始值
$（“body”）.children（'div#tooltip'）.remove（）；//清除工具提示容器
});

按照Edward的建议，所有的$（“.trigger”）.event（function（）{…}）；都被$（“#parent）.on（“event”，“.trigger”，function（）{…}）替换；这样jQuery就可以在DOM就绪后知道动态添加到DOM中的内容。此新内容生成如下所示：

    $("<div/>", { // creates a container <div> for the arrowup image
    id: "arrowup",
    class:"trigger no_underline", // is an anchor for tooltip
    css:{
        display:"none",
        position:"fixed",
        bottom:"30px",
        right:"30px",
        cursor: "pointer"
    },
    click:function(){ // assign page up functionality
        $("html, body").animate({scrollTop: "0px"}, 800);
        return false;                       
        },
    title: "Haut de page" // title to be passed to the tooltip
    }).appendTo("#template");

$("<img/>", { // creates the image and its functionality 
    src:"../images/arrowup.jpe",
    alt:"vers le haut",
    }).appendTo("#arrowup");

$(window).bind("scroll", function() { // shows tooltip only when page is scrolled
    var obj = $("#arrowup");
    if ($(this).scrollTop() > 300){ 
        obj.fadeIn(800);
    } else { 
        obj.fadeOut(800);
    }
});

$（“”，{//为arrowup图像创建一个容器
id:“向上箭头”，
类：“触发器无下划线”，//是工具提示的锚点
css:{
显示：“无”，
位置：“固定”，
底部：“30px”，
右：“30px”，
光标：“指针”
},
单击：function（）{//分配分页功能
$（“html，body”）.animate（{scrollTop:“0px”}，800）；
返回false；
},
标题：“上页”//要传递到工具提示的标题
}).附于（“#模板”）；
$(" 300){ 
法代因（800）；
}否则{
obj.fad