title: Highcharts tooltip displayed over div
body: <p>I'd like to have the pie chart tooltips to be displayed over the div partially hiding the chart. </p>
  
  <p>Here is my HTML structure. The <code>.circle-text</code> element contains my div and the <code>.container</code> the chart.  </p>
  
  <pre><code>&lt;div class="bubble"&gt;
      &lt;div class="circle-text"&gt;&lt;/div&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried solutions using CSS :</p>
  
  <pre><code>.highcharts-container {
      position: inherit !important;
  }
  .highcharts-tooltip {
      z-index: 9998 !important;
  }
  .highcharts-tooltip span {
      background-color:white;
      border:1px solid green;
      opacity:1;
      z-index:9999!important;
  }
  </code></pre>
  
  <p>or Highcharts properties :</p>
  
  <pre><code>tooltip: {
      pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;',
      style: {
          'color': 'pink',
          'z-index': '9999'
      }
  }
  </code></pre>
  
  <p>But none of them has worked so far. </p>
  
  <p>My div covering the chart has the following style and I don't see how it might interfere with the tooltip z-index.</p>
  
  <pre><code>.circle-text {
      position: absolute;
      display: table-cell;
      height: 200px;
      width: 200px;
      text-align: center;
      vertical-align: middle;
      border-radius: 50%;
      background: #3A3A4F;
      color: #fff;
      z-index: 2;
      top: 50px;
      left: 50px;
      cursor: pointer;
      box-shadow: 0 0 20px #000;
  }
  </code></pre>
  
  <p><a href="https://codepen.io/SamHCadman/pen/MzzrGJ" rel="nofollow noreferrer">https://codepen.io/SamHCadman/pen/MzzrGJ</a></p>