用户鼠标移入时，有弹出框出现，这样的需求很常见。这在处理HTML元素实现时简单，但是如果是对HTML5 Canvas 构成的图形进行处理，这种方法不再适用，因为Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体。而图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。然而，在HT for Web中，这种需求很容易实现，场景如下：
这个场景图是基于HT for Web的JSON文件，可能大家对怎么生成这样的JSON文件有疑惑，其实这里是基于这个麻雀虽小五脏俱全的“HTML5拓扑图编辑器”（http://www.hightopo.com/demo/2deditor_20151010/HT-2D-Editor.html）进行了扩展，很容易就自定义出满足我需求拓扑编辑器。不仅如此，在这个Demo中，定义的三种类型弹框的矢量图‘tips1.json’、‘tips2.json’、‘tips3.json’是通过这个矢量编辑器（http://www.hightopo.com/demo/vector-editor/index.html）简单绘制了下，也还蛮好用。在上述场景中，用户将鼠标移入到草地等对象时，会有弹出框显示它的详细信息，Demo地址：http://www.hightopo.com/demo/blog_meadow_20170605/index.html
具体实现如下：
准备工作
引入我们的HT（http://www.hightopo.com/）：
| <script src='ht.js'></script> dataModel = new ht.DataModel(); graphView = new ht.graph.GraphView(dataModel); graphView.addToDOM(); |
HT提供了自定义的JSON格式的矢量描述形式，以HT标准定义的JSON矢量格式，也可以作为图片进行注册和使用，HT的矢量方式比传统格式更节省空间，缩放不失真，戳HT for Web了解详细信息。这里，将三种形状的JSON弹出框注册成图片以便后续调用：
| ht.Default.setImage('tips1', 'symbols/tips1.json'); ht.Default.setImage('tips2', 'symbols/tips2.json'); ht.Default.setImage('tips3', 'symbols/tips3.json'); |
然后获取有交互效果的对象，其中各个对象中的属性名是给各个图元设置好的标签名：
| //树 var tree = { 'tree1' : true, 'tree2' : true, 'tree3' : true }; //草地 var grass = { 'grass1' : true, 'grass2' : true, 'grass3' : true }; //山 var mountain = { 'mountain': true }; |
弹出框
其实弹出框的本质是一个Node，当用户鼠标移入移出时，
1、控制Node的隐藏和显示可以达到弹框的效果；
2、鼠标位置的改变伴随着Node位置的改变；
3、鼠标移入到不同的对象上时，Node上的贴图也跟着发生变化；
4、Node中的属性值也随着鼠标位置发生变化。
