Displaying Kendo UI line chart on Kendo UI tooltip

I want to show a line chart on tooltip like below - Line Chart on tooltip
For this I created chart and embedding it in tooltip using content property

content: function (e) {
          return $("#" + $(e.target).attr("id") + "_tooltip").html();
       }

The issue is I want to display tooltip on a series, which is not happening right now. But if I plot same chart on body instead of embedding it on tooltip its working fine.

Is there anything extra I need to configure to handle such scenario?

dojo link

You can make your chart tooltip a content template and then create the chart when the tooltip is shown.

DEMO

Code:

<script id="template" type="text/x-kendo-template">
  <div id="myTooltip">
    <span>Some Text here</span>
    <div id="myChart"></div>
    <span>hover the connectors, not showing tootip</span>
  </div>
</script>

   function CreateTooltipChart(){
    // Satter line chart embedded in tooltip
      $("#myChart").kendoChart({
        chartArea: {
          height: 200,
          width: 310
        },
        title: {
          text: "Charge current vs. charge time"
        },
        seriesDefaults: {
          type: "scatterLine"
        },
        series: [{
          data: [[10, 10], [15, 20], [20, 25], [32, 40]]
        }],
        xAxis: {
          max: 35,
          labels: {
            format: "{0}m"
          },
        },
        yAxis: {
          max: 50,
          labels: false
        },
        //tooltip for chart is set here
        tooltip: {
          visible: true,
          format: "{1}% in {0} minutes"
        }
      });     
    }

    // Tooltip on span element
    var tooltip = $('.show-tooltip').kendoTooltip({
      autoHide: false,
      position: "right",
      width: 312,
      //height: 300,
      show: function(e){
        CreateTooltipChart();
      },
      content: kendo.template($("#template").html()),
    }).data("kendoTooltip");