Cascading Tooltip

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <style>
    #menu {
      display: none;
      position: absolute;
      padding: 20px;
      z-index: 99999;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4;
      font-family: Arial;
      font-size: 12px;
    }

    #menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  </style>

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

<body>
  <div id="menu">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </div>
  <div id='myChart'></div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    zingchart.node_mouseover = function(p) {
      $('.more').on('mouseenter', function(e) {
        $('#menu')
          .css('left', e.pageX)
          .css('top', e.pageY)
          .show();
        zingchart.exec(p.id, 'locktooltip', {});
      });

      $('#menu').on('mouseleave', function(e) {
        $('#menu').hide();
        zingchart.exec(p.id, 'unlocktooltip', {});
      });

      $('#menu a').on('click', function(e) {
        $('#menu').hide();
        zingchart.exec(p.id, 'unlocktooltip', {});
        zingchart.exec(p.id, 'hidetooltip', {});
      });
    };

    var myConfig = {
      "graphset": [{
        "type": "line",
        "title": {
          "text": "Average Metric"
        },
        "tooltip": {
          "height": 60,
          "sticky": true,
          "timeout": 1000,
          "font-size": 11,
          "text": "Node value is %node-value<br><a href=\"#\" class=\"more\">More</a>",
          "text-align": "left",
          "background-color": "#fff",
          "color": "#333",
          "padding": 10,
          "shadow": false,
          "border-width": 1,
          "border-color": "#ccc",
          "border-radius": 4,
          "html-mode": true,
          "placement": "horizontal",
          "distance": 10,
          "callout-width": 6,
          "callout-height": 20,
          "callout": true
        },
        "series": [{
            "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
            "text": "Apple"
          },
          {
            "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
            "text": "Microsoft"
          },
          {
            "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
            "text": "Oracle"
          },
          {
            "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
            "text": "Dell"
          }
        ]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <style>
    #menu {
      display: none;
      position: absolute;
      padding: 20px;
      z-index: 99999;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4;
      font-family: Arial;
      font-size: 12px;
    }

    #menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  </style>

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

<body>
  <div id="menu">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </div>
  <div id='myChart'></div>
</body>

</html>

zingchart.node_mouseover = function(p) {
  $('.more').on('mouseenter', function(e) {
    $('#menu')
      .css('left', e.pageX)
      .css('top', e.pageY)
      .show();
    zingchart.exec(p.id, 'locktooltip', {});
  });

  $('#menu').on('mouseleave', function(e) {
    $('#menu').hide();
    zingchart.exec(p.id, 'unlocktooltip', {});
  });

  $('#menu a').on('click', function(e) {
    $('#menu').hide();
    zingchart.exec(p.id, 'unlocktooltip', {});
    zingchart.exec(p.id, 'hidetooltip', {});
  });
};

var myConfig = {
  "graphset": [{
    "type": "line",
    "title": {
      "text": "Average Metric"
    },
    "tooltip": {
      "height": 60,
      "sticky": true,
      "timeout": 1000,
      "font-size": 11,
      "text": "Node value is %node-value<br><a href=\"#\" class=\"more\">More</a>",
      "text-align": "left",
      "background-color": "#fff",
      "color": "#333",
      "padding": 10,
      "shadow": false,
      "border-width": 1,
      "border-color": "#ccc",
      "border-radius": 4,
      "html-mode": true,
      "placement": "horizontal",
      "distance": 10,
      "callout-width": 6,
      "callout-height": 20,
      "callout": true
    },
    "series": [{
        "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
        "text": "Apple"
      },
      {
        "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
        "text": "Microsoft"
      },
      {
        "values": [42, 43, 30, 40, 31, 48, 55, 46, 48, 32, 38, 38],
        "text": "Oracle"
      },
      {
        "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
        "text": "Dell"
      }
    ]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: 600
});