I have this line chart where I am showing a shared tooltip of all series on the right side of the chart. However, in the mobile view, it looks ugly because half the screen space is taken by the chart and half by the tooltip. In the mobile responsive layout, I want the chart to take the whole screen width and shared tooltip to go to the bottom of the chart. How can I achieve this?

I have written the code below and it works on 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/

But the problem is that my chart is enclosed inside a container div which is further enclosed inside a section. Like the code below: Hence, the tooltip doesn't show below the chart as I want. Any ideas how I can achieve this?

<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>

And that same code behaves differently within enclosed section and div elements. see https://jsfiddle.net/userMB/k790c4rw/10