использование атрибутов в HTML-код для текста легенды

Question

Я новичок в старших чартах и ​​пытаюсь создать собственную легенду.Моя легенда должна иметь текст и значок.Значок должен содержать текст всплывающей подсказки.До сих пор я создал текст и значок.Для всплывающей подсказки у меня есть компонент, который имеет атрибут «текст».Атрибут text принимает HTML-код.В целом мой код выглядит следующим образом.

<i class="" meta-comp text='<div> Hello </div>'></i>

Мета-комп - это компонент всплывающей подсказки, текст которого является его атрибутом.

, когда я возвращаю приведенный выше код в функцию форматирования меткилегенда следующим образом

labelFormatter()
{
  return '<i class="" meta-comp text="<div> Hello </div>"></i>'

Он просто отображает значок, а подсказки нет.Пожалуйста, дайте мне знать, где я ошибаюсь.

Схема кода

legend: {
  useHTML: true,
  layout: 'vertical',
  align: 'left',
  itemMarginTop: 10,
  itemMarginBottom: 15,
  title: {
    style: {
      fontSize: "14px",
      fontWeight: "600",
      color: "#404040"
    }
  },
  itemStyle: {
    fontWeight: 'normal',
    color: '#404040',
    fontSize: '14px'
  },
  //x  : 70,
  //y:  110,
  labelFormatter: function () {



    return '<div class="legendtext">' + this.y + '&nbsp;&nbsp;' + this.name +'<span><i class="material-icons help-icon" fam-tooltip tooltip-text="Hello How are you"  tooltip-position="right">info_outline</i></span></div>'

  }
},

здесь fam-tooltip - это пользовательский компонент, отображающий всплывающую подсказку.