How do I dynamically adjust the tooltip box of a zingchart legend to be wrapped around the text?

In the following chart, I modified the name of the Test n5. I want to have a text box that can wrap the text by doing a line break. Right now with the current code the box has the right maximal width but the text and the red box around it do not extend in height. What should I change?

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
 
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body,
    #myChart {
      height: 100%;
      width: 100%;
    }
  </style>
</head>
 
<body>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    const chartConfig = {
        type: "area",
        title: {
          text: "Legend Tooltips"
        },
        subtitle: {
          text: "Hover over the legend items.",
          'font-weight': "normal"
        },
        legend: {
          tooltip: {
            text: "%t was performed by %plot-description.",
            'background-color': "#ffe6e6",
            'font-color': "red",
            'font-family': "Georgia",
            'border-width': 1,
            'border-color': "red",
            'border-radius': "5px",
            <!-- I added max width -->

            "max-width": "170px",  
          },
          layout: "5x1",
          x: "82%",
          y: "25%",
        },
        plot: {
          aspect: "spline",
          stacked: true,
          marker: {
            visible: false
          }
        },
        plotarea: {
          'margin-right': "25%",
        },
        'scale-y': {
          values: "0:1000:200",
          guide: {
            'line-style': "dotted"
          }
        },
        series: [
          {
            values: [138.6,196.3,153.6,127.4,114.1,181.4,131.5,170.9],
            text: "Test 1",
            description: "Dr. Abel"
          },
          {
            values: [84.8,65.8,122.4,96.6,279.1,56.4,275.9,237.8],
            text: "Test 2",
            description: "Dr. Bernard"
          },
          {
            values: [108.7,132.9,61.6,192.1,134.5,349.4,183.9,224.4],
            text: "Test 3",
            description: "Dr. Chang"
          },
          {
            values: [213.2,65.6,139.5,194.6,184.4,79.2,73.1,33.7],
            text: "Test 4",
            description: "Dr. Diaz"
          },
          {
            values: [236.6,260.8,155.2,58.7,119.1,192.4,164.8,51.4],
            text: "Test 5",
            description: "Dr. Wise He is very special"
          }
        ]
      };
 
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%'
    });
  </script>
</body>
 
</html>

Solution

full HTML will work only if you set 'html-mode': true, on the tooltip object as I've demonstrated in this demo. Please read here for more details on how to use HTML tooltips in ZingChart