Web Chart入门（5） 5. 实战draw2d之figure tooltip实现

Web Chart入门（5） 5. 实战draw2d之figure tooltip实现2013-06-30 csdn oscar999写在前面

申明一下，关于系列五的前4篇的介绍都是基于 draw2d 的版本version 2.3.0 上的开发。

截至目前（2013/05）, draw2d的最新版本已经是version 2.6.1 了。

对于tooltip 的功能，在 version 2.3.0是没有提供，但是，在version 2.6.1已经提供了实现tooltip的方式。

实现tooltip in version 2.6.1

在没有看到实现源代码之前，以为实现方式应该是在draw2d.js 给 shape 加上一个tooltip 的属性，提供一些set 或hide 的方法供调用。

实际看过之后才发现并非这样。先直接贴上如何实现的Source Code:

MyFigure = draw2d.shape.basic.Rectangle.extend（{NAME : "MyFigure",init : function（）{this._super（）;this.createPort（"input"）;this.createPort（"output"）;this.setDimension（50,50）;this.tooltip = null;},/*** @method* Change the color and the internal value of the figure.* Post the new value to related input ports.* */onMouseEnter: function（）{this.showTooltip（）;},onMouseLeave: function（）{this.hideTooltip（）;},setPosition: function（x,y）{this._super（x,y）;this.positionTooltip（）;},hideTooltip:function（）{this.tooltip.remove（）; this.tooltip = null;},showTooltip:function（）{this.tooltip= $（"<center class="tooltip">Tooltip</center>"）.appendTo（"body"）;this.positionTooltip（）;},positionTooltip: function（）{if（ this.tooltip===null）{return;}var width =this.tooltip.outerWidth（true）;var tPosX = this.getAbsoluteX（）+this.getWidth（）/2-width/2+8;var tPosY = this.getAbsoluteY（）+this.getHeight（） + 20;this.tooltip.css（{"top": tPosY, "left": tPosX}）;}}）;