highcharts sparkline tolltip is hidden behind the bootstrap card

Question

please help me. very nice and good library though. highcharts tooltip is hidden behind the bootstrap card! i have seen multiply answers on this topic but not one answer helped my situation. I used enableMouseTracking: true, then .highcharts-container { overflow: visible !important; } and other. the tooltip become visible just when i change the highcharts-tooltip-container z index to 100. - but i dont want this solution, but some better

so fidlle when all is working: https://jsfiddle.net/3kz6u1tn/ - where the ttolltip are showing. I copied this code to my files, in one file i have the highchart.sparkline long function and in the other i have div with id and highchart.sparkline where i call before function. i dont know why doesnt it displayed tooltip at all? thanks very much

 [code] Highcharts.SparkLine = function (a, b, c) {
    var hasRenderToArg = typeof a === 'string' || a.nodeName,
      options = arguments[hasRenderToArg ? 1 : 0],
      defaultOptions = {
        chart: {
          renderTo: (options.chart && options.chart.renderTo) || this,
          backgroundColor: null,
          borderWidth: 0,
          type: 'line',
          margin: [2, 0, 2, 0],
           width: 200,
          height: 100,
    
          skipClone: true
        },
        title: {
          text: ''
        },
        credits: {
          enabled: false
        },
        xAxis: {
          type: 'datetime'
        },
        yAxis: [
          {
            title: {
              text: null
            }
          },
          {
            title: {
              text: null
            }
          }
        ],
        legend: {
          enabled: false
      },
        tooltip: {
            shared: true,
             crosshairs: true,
            outside: true,
            enabled: true,
            headerFormat: '<b>{point.key:%Y-%m-%d %H:%M:%S}</b><br>',
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: {point.y}<br>'
    },
        plotOptions: {
          series: { 
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval:  3600 * 1000 ,
            animation: false,
            lineWidth: 1,
            shadow: false,
            states: {
              hover: {
                lineWidth: 1
              }
            },
            enableMouseTracking: true,
            marker: {
              radius: 1,
              states: {
                hover: {
                  radius: 2
                }
              }
            },
            fillOpacity: 0.25
          },
          column: {
            negativeColor: '#910000',
            borderColor: 'silver'
          }
        }   
      };

    options = Highcharts.merge(defaultOptions, options);

  

    return hasRenderToArg ?
      new Highcharts.Chart(a, options, c) :
      new Highcharts.Chart(options, b);
  };
  

[/code][code]      <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/accessibility.js"></script>
  <script src="home/components/highspark.js"></script>         <div class="row no-gutters  pl-1">
                        <div class="col-12 text-center">
                       
                        <div id="highspark" ></div>
                        
                    </div><script>

    var numDataPoints = 30;

    var yData1 = [];
    var yData2 = [];


    for (var i = 0; i < numDataPoints; i++) {
    
      var randomValue = Math.floor(Math.random() * 100);
      var randomValue1 = Math.floor(Math.random() * 100);
   


      yData1.push(randomValue);
      yData2.push(randomValue1);
    }
    document.addEventListener('DOMContentLoaded', function () {
    Highcharts.SparkLine( {
        chart: {
        renderTo: 'highspark'
    },
        
        series: [
        {
        name: 'temp',
          data: yData2,
          color: 'blue',
          yAxis: 0,
          tooltip: {
            valueSuffix: ' C'
        }
        },
        {
         name: 'level',
          data: yData1,
          color: 'red',
          yAxis: 1,
          tooltip: {
            valueSuffix: ' mv'
        }
        }
      ],
      yAxis: [
        {
            min: 50,
            max: 100,
        },
        {
            opposite: true,
            min: 0,
            max: 100
        }
    ]

});
    });
    </script>[/code]