Javascript 车把模板未在工具提示中正确显示JSON数据

我有一个手柄模板，可以在.people分区中渲染图片，我不知道如何使工具提示显示在每个人的图片旁边。经过数小时的反复试验，我找到了解决方案，将我编写的工具提示脚本直接放入模板中。现在，我为模板中的每个.people div显示了一个工具提示

<script id="apalachee-template" type="text/x-handlebars-template">
     <h2>Place</h2>
        {{#place}}
            <h5>{{year}}</h5>
                {{#people}}
                    <div class="people">
                        <img src="{{ pic }}">
                        <p>{{name}}</p>
                    </div>
                    <div class="box">
                      <h4>{{ name }}</h4>
                    </div>
                {{/people}}
        {{/place}}
<script>
jQuery(document).ready(function(e){function t(t){e(".box").show()}function n(t){e(".box").hide()}function r(t){e(".box").css("left",t.pageX-50+"px");e(".box").css("top",t.pageY-85+"px")}e(".people").on("mouseover",t);e(".people").on("mouseout",n);e(".people").on("mousemove",r)})
 <{{!}}/script>
</script>

---

我想做的是分离数据，这样当有人悬停在（比如）人造丝的照片上时，它就会出现在tooltip.box div中。我有它的地方，只有一些数据显示和混乱的工具提示。我的直觉是我没有正确格式化模板以显示数据

你能提供一个提琴手吗？在这里：但是现在，工具提示没有出现…希望代码显示我正在尝试做什么。

{
    "place": [
        {
            "year": "2011",
            "people": [
                {
                    "name": "Ronald",
                    "dob": "12/12/55"
                },
                {
                    "name": "Warren",
                    "dob": "8/22/57"
                },
                {
                    "name": "Miguel",
                    "dob": "9/29/61"
                }
            ]
        },
        {
            "year": "2012",
            "people": [
                {
                    "name": "Bruce",
                    "dob": "3/24/68"
                }
            ]
        },
        {
            "year": "2014",
            "people": [
                {
                    "name": "Rayon",
                    "dob": "12/12/79"
                },
                {
                    "name": "James",
                    "dob": "1/30/48"
                }
            ]
        }
    ]
}