Can´t display tooltip on chart legend (Echarts)

Version

4.4.0

Steps to reproduce

I implemented a chart with legend based on Echarts libary. What i want to develop now is tooltip for each data on chart legend. Data are prepared as array of object and each name have corresponding description which i want to show on tooltip.

What is expected?

In other word, i want tooltip from picture below to be shown after mouse hover on legend names.

What is actually happening?

Tooltip is not showed

```
   <div class="card grid-stack-item-content cd-example" id="dashboard-header">
                        <div class="card-header container-fluid">
                            <div class="row dashboard-row">
                                <div class="col-3 dashboard-icon-div text-center">
                                    <h1 class="dashboard-h1"><i class="fa fa-tags dashboard-logo"></i></h1>
                                </div>
                                <div class="col-5"> 
                                    <h4 class="card-title dashboard-card-title">{{trans('app.icd10_codes')}}</h4>
                                    <h6 class="card-subtitle text-muted">    
                                          @if (count($binnedIcds['targetIcds']['codes']) > 0)
                                                <span class="info-box-number">
                                                  {{count($binnedIcds['targetIcds']['codes'])}}
                                                  {{trans('app.skin_disease_groups')}}
                                               </span>
                                         @endif
                                    </h6>
                                </div>
                            </div> 
                        </div>
                        <div class="card-body">
                           <div class="row">
                             <div class="col-lg-12 col-md-12 col-sm-12">
                                 <div id="pie-chart" style="width:100%; min-height: 480px;"></div>
                             </div>
                            </div>      
                        </div>

                    </div>

class NewIcdChart
{
  constructor(ctx, targetsLabels, othersLabel, undefLabel, targetsTooltips, othersTooltip,
    undefTooltip, nTargets, nOthers, nTotal)
  {

    this.othersColor = '#888888';
    this.undefColor = '#cccccc';

    var labels = {
      targetsLabels,
      othersLabel,
      undefLabel
    };

    var tooltips = {
      targetsTooltips,
      othersTooltip,
      undefTooltip,
    };

    var nTargetImages = nTargets.reduce((a,b) => a + b, 0);
    var nUndef = nTotal - nTargetImages - nOthers;
    var counts = {
      nTargets,
      nOthers,
      nTotal,
      nUndef, 
    };

    this.chart;
    this.hasOthers = false;
    this.hasUndef = false;
    this.drawChart(ctx, labels, tooltips, counts);
  }




drawChart(ctx, labels, tooltips, counts){



var otherValue=counts.nOthers;

var otherLabel=labels.othersLabel;

var otherTooltip=tooltips.othersTooltip;

var undefinedValue=counts.nUndef;

var undefinedLabel=labels.undefLabel;

var undefinedTooltip=tooltips.undefTooltip;

var targetValues=counts.nTargets;

var targetLabels=labels.targetsLabels;

var targetTooltip=tooltips.targetsTooltips;





var finalChartValue=[];




for(var i=0; i<targetValues.length; i++){

    for(var i=0; i<targetLabels.length; i++){

        for(var i=0; i<targetTooltip.length; i++){

            var  obj = {"value": targetValues[i], "name": targetLabels[i], "tooltip": targetTooltip[i]};
            finalChartValue.push(obj);
        }
    }
}




var otherObject={
    value: otherValue,
    name : otherLabel,
    tooltip : otherTooltip

};

var undefinedObject={
    value: undefinedValue,
    name : undefinedLabel,
    tooltip : undefinedTooltip
};


finalChartValue.unshift(otherObject, undefinedObject);

console.log("finalChartValue", finalChartValue);

var finalChartLables=[];
 finalChartValue.forEach(function(res) {
        finalChartLables.push(res.name);
});

var option = {


    legend: {
        x : 'center',
        y : 'bottom',
        padding: 1,
    

    formatter: function (name) { 
      var data = this.getSeries()[0].data;  
      var totalValue = data.reduce((acc, item) => { 
        acc += item.value;
        return acc;
      }, 0)
      var targetValue;
      var targetTooltip;  
      data.map(item => {
        if (item.name == name) {
          targetValue = item.value; 
          targetTooltip= item.tooltip;
        }
      })
      var p = (targetValue / totalValue * 100).toFixed(2); 
      console.log("name", name);
      return name  + ' ' + p + '%';
    },
    data:finalChartLables,
       tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}  : {c}",


}
},
toolbox: {
    show: true,
    feature: {

        dataView: { show: true, readOnly: false },
        magicType: {
            show: true,
            type: ['pie']
        },
        restore: { show: true },
        saveAsImage: { show: true }
    }
},
color: ["#f62d51", "#dddddd", "#ffbc34", "#7460ee", "#009efb", "#2f3d4a", "#90a4ae", "#55ce63"],
calculable: true,
series: [{
        name: 'ICD',
        type: 'pie',
        radius: [20, 180],
        center : ['50%', '50%'],
        roseType: 'radius',
        itemStyle: {
            normal: {
                label: {
                    show: false,
                    formatter: "{b} :  \n ({c})",
                    fontWeight: 100
                },
                labelLine: {
                    show: false,
                    formatter: "{b} :   \n ({c})",
                    fontWeight: 100
                }

            },
            emphasis: {
                label: {
                    show: true,
                    formatter: "{b} :  \n ({c})",
                    fontWeight: 100

                },
                labelLine: {
                    show: true,
                    formatter: "{b} :  \n ({c})",
                    fontWeight: 100

                }
            }
        },
        data: finalChartValue
    },

    ]
};

// use configuration item and data specified to show chart

ctx.setOption(option, true), $(function() {
    function resize() {
        setTimeout(function() {
            ctx.resize()
        }, 100)
    }
    $(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
});
  console.log("ctx", ctx);

}

}

<!-- This issue is generated by echarts-issue-helper. DO NOT REMOVE -->
<!-- This issue is in English. DO NOT REMOVE -->

[jacobzed]

Showing tooltip when hovering on legend is not supported, so this is not a bug.

If that is that case, what is the legend.tooltip property for? Perhaps that bit of the doc needs to make it clear.

[jayarjo]

I agree , it is not clear what legend.tooltip property is for. Also tooltip for legend is absolutely required for a lengthy items.