tooltips outside of chart in html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="http://www.zingchart.com/scripts/zcDocs.js"></script>
  <link href='http://www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    #demo-chart {
      float: left;
      width: 75%;
      border-radius: 5px 0px 0px 5px;
    }

    #outputContainer {
      height: 400px;
      width: 25%;
      color: #ffd740;
      background-color: #000;
      border-radius: 0px 5px 5px 0px;
      float: left;
      display: flex;
      /* instaniate flexbox */
      justify-content: center;
      /* align horizontal */
      align-items: center;
      /* align vertical */
    }

    #output {
      font-size: 8em;
      background-color: inherit;
    }
  </style>
</head>

<body>
  <div id='demo-chart'></div>
  <div id='outputContainer'><span id='output'></span></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      'type': 'bar',
      'theme': 'dark',
      'palette': ['#00bcd4', '#f44336'],
      'backgroundColor': '#000',
      'legend': {},
      'series': [{
          'values': [11, 26, 7, 44, 11]
        },
        {
          'values': [42, 13, 21, 15, 33]
        }
      ]
    };

    // first parameter can be null for all charts or
    // 'demo-chart' to bind just to this chart
    zingchart.bind(null, 'node_mouseover', function(p) {
      console.log(p)
      document.getElementById('output').innerHTML = p.value;
    });
    zingchart.bind(null, 'node_mouseout', function(p) {
      document.getElementById('output').innerHTML = '';
    });

    zingchart.render({
      id: 'demo-chart',
      data: myConfig,
      height: 400,
      width: '100%'
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="http://www.zingchart.com/scripts/zcDocs.js"></script>
  <link href='http://www.zingchart.com/css/zcDocs.css' rel='stylesheet' type='text/css'>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='demo-chart'></div>
  <div id='outputContainer'><span id='output'></span></div>
</body>

</html>

#demo-chart {
  float: left;
  width: 75%;
  border-radius: 5px 0px 0px 5px;
}

#outputContainer {
  height: 400px;
  width: 25%;
  color: #ffd740;
  background-color: #000;
  border-radius: 0px 5px 5px 0px;
  float: left;
  display: flex;
  /* instaniate flexbox */
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

#output {
  font-size: 8em;
  background-color: inherit;
}

var myConfig = {
  'type': 'bar',
  'theme': 'dark',
  'palette': ['#00bcd4', '#f44336'],
  'backgroundColor': '#000',
  'legend': {},
  'series': [{
      'values': [11, 26, 7, 44, 11]
    },
    {
      'values': [42, 13, 21, 15, 33]
    }
  ]
};

// first parameter can be null for all charts or
// 'demo-chart' to bind just to this chart
zingchart.bind(null, 'node_mouseover', function(p) {
  console.log(p)
  document.getElementById('output').innerHTML = p.value;
});
zingchart.bind(null, 'node_mouseout', function(p) {
  document.getElementById('output').innerHTML = '';
});

zingchart.render({
  id: 'demo-chart',
  data: myConfig,
  height: 400,
  width: '100%'
});