Question

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

当锚点位于页面的正常流程中时它非常有效但是当锚点不在流程中时它不显示

$("<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

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

Answer 2

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

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

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

//your code here.

});

Answer 3

以下代码有效！

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

并注意到对它的唯一修改是div＃tooltip现在位于正文中而不是作为其锚点的子节点。

为什么这会让它发挥作用？我真的不知道。

Answer 4

在我的网站上，我使用class =“trigger”的DOM节点作为工具提示的锚点。当mouve悬停这些锚点时，工具提示会显示并随着鼠标移动而移动。生成工具提示容器的jQuery代码修改如下：

$("#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”）。event（function（）{...}）;被$（“＃parent”.on（“event”，“。strigger”，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);
    }
});

在原始列表中，每个.trigger都已单独给出说明。如果创建新的.trigger，他们将不会听到指令，也不会响应mouseover，mousemove和mouseout事件，每个事件都直接负责他们自己的事件。在修改后的设置中，只有容器（这里是#template）被赋予了指令;它负责代表其子元素注意事件。捕获事件的工作已被委派。

参考Alexander的评论，在我的问题中，我绑定到锚位置，而我现在绑定到工具提示触发时光标的位置：这是我期望的行为。 3

当我问这个问题时，我认为工具提示的未显示与新元素超出正常流程（位置：固定）的事实有关。根本不是这样。

现在一切正常！感谢所有帮助过我的人。

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

4 个答案:

检查JSFiddle