Web Chart 入門（5-5）：draw2d 實現 Figure Tooltip（基於 v2.6.1+）

版本差異說明

draw2d v2.3.0 無內置 Tooltip 支持，v2.6.1 引入官方實現方式。本文演示新版擴展法，並探討舊版替代方案。

v2.6.1+ 官方擴展實現

核心思想：疊加式擴展，不修改框架源碼，通過繼承 Shape 類，在 onMouseEnter/onMouseLeave 動態創建/移除 DOM 元素作為 Tooltip。

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;
    },
    onMouseEnter: function() { this.showTooltip(); },
    onMouseLeave: function() { this.hideTooltip(); },
    setPosition: function(x, y) {
        this._super(x, y);
        this.positionTooltip();
    },
    hideTooltip: function() {
        if (this.tooltip) { this.tooltip.remove(); this.tooltip = null; }
    },
    showTooltip: function() {
        this.tooltip = $('<div class="tooltip">Tooltip</div>').appendTo('body');
        this.positionTooltip();
    },
    positionTooltip: function() {
        if (!this.tooltip) 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 });
    }
});

舊版本 (v2.3.0) 嘗試與替代方案

嘗試移植上述代碼失敗，原因：舊版 onMouseEnter/onMouseLeave 事件不觸發，需修改框架源碼才能啟用。

替代方案：集成 jQuery UI Tooltip

jQuery UI 1.9+ 提供 Tooltip 組件，利用 HTML title 屬性自動生成美觀提示框。

<!-- 頁面引入 jQuery & jQuery UI -->
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3.custom.css">

<script>
$(window).load(function(){ $("#center1").tooltip(); });
</script>

<div id="center1" title="This is jQuery UI tooltip!">Mouse over me!</div>

將 draw2d Shape 綁定 title 屬性

需修改三處源碼（以 Rectangle 為例）：

1. repaint 方法 添加：attributes.title = stitle;
2. createShapeElement 返回：return this.canvas.paper.rect(..., this.getTitle());
3. Raphael 核心 rect 實現 接收 title 並設置到 SVG 元素 title 屬性。

總結

• 新版本：直接擴展 Shape，靈活可控，推薦升級框架。
• 舊版本：若不願升級，集成 jQuery UI + 修改框架源碼綁定 title 是可行路徑。
• Tooltip 樣式可通過 CSS 完全定制。