Legend can have tooltip now

src/component/legend/LegendModel.js

@@ -176,11 +176,16 @@ define(function(require) {
             },
             // formatter: '',
             // 选择模式，默认开启图例开关
-            selectedMode: true
+            selectedMode: true,
             // 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
             // selected: null,
             // 图例内容（详见legend.data，数组中每一项代表一个item
             // data: [],
+
+            // Tooltip 相关配置
+            tooltip: {
+                show: false
+            }
         }
     });
 

src/component/legend/LegendView.js

@@ -175,6 +175,8 @@ define(function (require) {
 
             var itemIcon = itemModel.get('icon');
 
+            var tooltipModel = itemModel.getModel('tooltip');
+
             // Use user given icon first
             legendSymbolType = itemIcon || legendSymbolType;
             itemGroup.add(symbolCreator.createSymbol(
@@ -203,16 +205,17 @@ define(function (require) {
             var textAlign = itemAlign;
 
             var formatter = legendModel.get('formatter');
+            var content = name;
             if (typeof formatter === 'string' && formatter) {
-                name = formatter.replace('{name}', name);
+                content = formatter.replace('{name}', name);
             }
             else if (typeof formatter === 'function') {
-                name = formatter(name);
+                content = formatter(name);
             }
 
             var text = new graphic.Text({
                 style: {
-                    text: name,
+                    text: content,
                     x: textX,
                     y: itemHeight / 2,
                     fill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
@@ -224,15 +227,29 @@ define(function (require) {
             itemGroup.add(text);
 
             // Add a invisible rect to increase the area of mouse hover
-            itemGroup.add(new graphic.Rect({
+            var hitRect = new graphic.Rect({
                 shape: itemGroup.getBoundingRect(),
-                invisible: true
-            }));
+                invisible: true,
+                tooltip: tooltipModel.get('show') ? zrUtil.extend({
+                    content: content,
+                    formatterParams: {
+                        componentType: 'legend',
+                        legendIndex: legendModel.componentIndex,
+                        name: name,
+                        $vars: ['name']
+                    }
+                }, tooltipModel.option) : null
+            });
+            itemGroup.add(hitRect);
 
             itemGroup.eachChild(function (child) {
-                child.silent = !selectMode;
+                child.silent = true;
             });
 
+            hitRect.silent = !selectMode;
+
+
+
             this.group.add(itemGroup);
 
             graphic.setHoverStyle(itemGroup);

src/component/tooltip/TooltipView.js

@@ -7,6 +7,7 @@ define(function (require) {
     var numberUtil = require('../../util/number');
     var parsePercent = numberUtil.parsePercent;
     var env = require('zrender/core/env');
+    var Model = require('../../model/Model');
 
     function dataEqual(a, b) {
         if (!a || !b) {
@@ -460,7 +461,20 @@ define(function (require) {
             }
             // Tooltip provided directly. Like legend
             else if (el && el.tooltip) {
-                var tooltipContent = el.tooltip;
+                var tooltipOpt = el.tooltip;
+                if (typeof tooltipOpt === 'string') {
+                    tooltipOpt = {
+                        content: tooltipOpt
+                    };
+                }
+                var subTooltipModel = new Model(tooltipOpt, tooltipModel);
+                var defaultHtml = subTooltipModel.get('content');
+                var asyncTicket = Math.random();
+                this._showTooltipContent(
+                    // TODO params
+                    subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') || {},
+                    asyncTicket, e.offsetX, e.offsetY, el, api
+                );
             }
             else {
                 if (globalTrigger === 'item') {