3、鼠标移入到不同的对象上时，Node上的贴图也跟着发生变化；
4、Node中的属性值也随着鼠标位置发生变化。
所以，要实现弹框，首先应新建Node，并将其的层级设置为‘higher’，在这之前还需要将场景图的JSON文件反序列化，并且给反序列化后的图元均设置为层级‘lower’，防止被已有的图元挡住：
ht.Default.xhrLoad('meadow.json', function(text) {
const json = ht.Default.parse(text);
if(json.title) document.title = json.title;
dataModel.deserialize(json);
//设置层级
dataModel.each(function(data){
data.setLayer('lower');
});
//新建node
var node = new ht.Node();
node.s('2d.visible',false);
node.setLayer('higher');
dataModel.add(node);
})然后，对底层的DIV监听mousemove事件，判断鼠标的位置是否在上述三个对象之上，根据对象类型，调用layout()函数对Node重新布局：
graphView.getView().addEventListener('mousemove', function(e) {
node.s('2d.visible',false);
var hoverData = graphView.getDataAt(e);
pos = graphView.getLogicalPoint(e);
if(!hoverData) return;
if(tree[hoverData.getTag()]){
layout(node, pos, 'tips1');
} else if (grass[hoverData.getTag()]) {
layout(node, pos, 'tips2');
} else if (mountain[hoverData.getTag()]) {
layout(node, pos, 'tips3');
}
});layout()函数所做的事情，已经在前面详细的阐述，其中，弹框中属性值的更新是将JSON文件的的text属性进行数据绑定，绑定的格式很简单，只需将以前的参数值用一个带func属性的对象替换即可，func的内容有一下几种类型：
1、function类型，直接调用该函数，并传入相关Data和view对象，由函数返回值决定参数值，即func(data, view)；调用。
2、string类型：
style@***开头，则返回data.getStyle(***)值，其中***代表style的属性名。
attr@***开头，则返回data.getAttr(***)值，其中***代表attr的属性名。
field@***开头，则返回data.***值，其中***代表attr的属性名。
如果不匹配以上几种情况，则直接将string类型作为data对象的函数名调用data***(view)，返回值作为参数值。
除了func属性外，还可以设置value属性作为默认值，如果对应的func取得的值为undefined或者null时，则会采用value属性定义的默认值，详情可见HT for Web数据绑定手册（http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html）。例如，在这里，’tips1.json’文件中对阳光值进行数据绑定的结果如下：
