我有一个折线图，我在图表右侧显示所有系列的共享工具提示。但是，在移动的视图中，它看起来很难看，因为一半的屏幕空间被图表占用，一半被工具提示占用。在移动响应布局中，我希望图表占用整个屏幕宽度，共享工具提示位于图表底部。如何实现这一点？
我已经写了下面的代码，它在jsfiddle上工作。

responsive: {
    rules: [{
      chartOptions: {
        chart: {
          marginRight: 0
        },
        tooltip: {
        outside: true,
          positioner: function(boxWidth, boxHeight, point) {
            var chart = this.chart; // get plotTop;

            return {
              x: chart.plotLeft + chart.plotSizeX - 100,
              y: chart.chartHeight - chart.plotTop - chart.xAxis[0].bottom + boxHeight + 50
            };
          }
        }
      },
      condition: {
        maxWidth: 640
      }
    }]
  }

https://jsfiddle.net/userMB/k790c4rw/4/
但问题是我的图表被包含在一个容器div中，而容器div又被进一步包含在一个section中。如下面的代码所示：因此，工具提示没有显示在图表下面，我想。有什么想法，我可以做到这一点？

<section class="section section-lg ">
    <div class="container" style="max-width: 95vw; border: 1px solid grey; min-height: 65vh;">
        <"some form">
        <div id="chart" style="min-height: 50vh;"></div>
    </div>
<section>

同样的代码在包含的section和div元素中的行为也是不同的。