Javascript 把手模板中的鼠标悬停弹出窗口

我创建了一个车把模板来显示一行行图片。我想做的是让用户将鼠标悬停在图像上，然后读取工具提示框中的信息。但是，我无法找出工具提示在模板中不起作用的原因。以下是我得到的：

模板：

<script id="test-template" type="text/x-handlebars-template">
            {{#place}}
                <h5>{{year}}</h5>

                 {{#people}}

                 <a href="#" class="popper" data-popbox="pop1">
                     <div class="people">
                        <img src="{{ pic }}">
                    </div>
                </a>
                    <div id="pop1" class="popbox">
                        <h2>{{ name }}</h2>
                        <p> {{ dob }} </p>
                    </div>

                {{/people}}
            {{/place}}
</script>

这是我正在使用的工具提示脚本。它可以处理模板之外的任何内容。我也考虑过使用jQuery，但我遇到了同样的问题

<script>
jQuery(function ($) {
    function mouseoverActiontooltipImage(event){
        $("body").append("<div id='box'></div>"); //Would like to use another div
        $("#box").css("left",(event.pageX + 20) + "px");
        $("#box").css("top",(event.pageY - 10) + "px");
    }

    function mouseoutActiontooltipImage(event){
        $("#box").remove();
    }

    function mousemoveActiontooltipImage(event){
        $("#box").css("left",(event.pageX + 20) + "px");
        $("#box").css("top",(event.pageY - 10) + "px");
    }
   $('.people').bind('mouseover', mouseoverActiontooltipImage);
   $('.people').bind('mouseout', mouseoutActiontooltipImage);
   $('.people').bind('mousemove', mousemoveActiontooltipImage);

});

</script>

编辑：我用新的把手模板和工具提示代码更新了我的问题。我可以将鼠标悬停在模板外的div上，会出现一个弹出窗口，但在模板内仍然看不到它

---

编辑2：我找到了一个临时解决方案，这引出了另一个问题。

听起来在使用把手模板并将其添加到DOM之前，JavaScript绑定只发生了一次。在将鼠标悬停代码添加到DOM后，需要将其绑定到每个新模板使用的事件。

控制台中是否有错误？是否在jQuery脚本之前加载Handlebar模板脚本？运行一些控制台日志测试，以查看哪个正在首先运行。模板需要在jQuery之前运行。我没有收到任何控制台错误。我认为这只是在模板之前加载jquery。这听起来可能是个问题，但我不确定在模板进入dom之后如何加载jquery。这只是在我脑海中切换handlebar.js和jquery.js链接顺序的问题吗？您将自定义js放在哪里？它应该在你身体的末端，在极端情况下，是你执行的最后一块JS——如果不是，试试看。一切都在我身体的末端。如果我在模板div之外创建了一个div，那么悬停代码就会起作用。里面的任何内容都不会显示。这有意义吗？