在没有看到实现源代码之前，以为实现方式应该是在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= $('
    
     Tooltip
    
').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});    }    });

可以发现， 实现方式其实是叠加式的， 并没有在原有的定义处进行修改， 而是提供给开发者扩展的这种方式。 继承一个shape类--》mouse enter 和 mouse leave 时打开和关闭tooltip. tooltip 的实现就是在body 页面添加一个div, 设置此div的css 样式及position. 既然是这种实现方式，则在老版本上应该依据此种方式也可以添加tooltip 了。 试了一下， 没有成功。 原因是 onMouseEnter 和 onMouseLeave 的事件触发方法没有执行。 看来要达成此效果，需要修改draw2d.js 使  shape 的mouse enter 和mouse leave的事件方法可以执行。 另外就是要加入tooltip 的 CSS了。

老版本的其他解决方案

如果使用的是draw2d 的老版本，是否有其他方式实现tooltip 的功能呢？ 答案肯定是有的。 实现原理和新版本的实现应该是类似的。 介绍解决方案之前先介绍一下jQueyUI jQuery UI - jQuery user interface ， 是使用jQuery 实现的一些界面元素。 在jQueryUI 1.9 版本及以上就有tooltip 的组件。(1.8 版本及以下都没有) 看一下如何实现：

    
    
    
    
     Mouse over me!
    

实现方式是： 查找页面元素是否有title 的属性， 如果有的话， 就添加 tooltip 的div. 所以如果我们给页面的svg的figure 添加title 的属性应该就可以显示美观的tootip 了。

attributes.title = stitle;

createShapeElement: function () {    	        return this.canvas.paper.rect(this.getAbsoluteX(), this.getAbsoluteY(), this.getWidth(), this.getHeight(), null, this.getTitle());    }

//add title    paperproto.rect = function (x, y, w, h, r ,t) {    	        var out = R._engine.rect(this, x || 0, y || 0, w || 0, h || 0, r || 0, t || "");        this.__set__ && this.__set__.push(out);        return out;    };

//add title    R._engine.rect = function (svg, x, y, w, h, r, t) {        var el = $("rect");        svg.canvas && svg.canvas.appendChild(el);        var res = new Element(el, svg);                res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000", title: t || ""};        res.type = "rect";        $(el, res.attrs);        return res;    };