CODEWITHSUNDEEP
javascriptjqueryhighcharts
apokryfos
apokryfos

Reputation: 40673

SVG tooltip z-index with html title

I'm trying to use an HTML title with a very large tooltip. However I can't seem to get the tooltip background to appear above the title.

Here's my code:

var chart = new Highcharts.Chart({
  "chart": {
    "type": "gauge",
    "renderTo": "chart-2-container",
    "marginTop": 60
  },
  "series": [{
    "data": [{
      "y": 55.6,
      "name": "Area",
      "tooltip": "Area: 50.6 %<br/>Minimum: 50.6<br/>3rd quartile: 57.1<br/>2nd quartile: 59.4<br/>1st quartile: 64.7<br/>Maximum: 75.7"
    }],
    "name": "%"
  }],
  "tooltip": {
    "borderColor": "#E2E2E2",
    "borderRadius": 5,
    "backgroundColor": "white",
    "style": {
      "color": "#454545",
      "fontSize": 14,
      "fontFamily": "Arial, sans-serif",
      "zIndex": 9999,
      "lineHeight": 14 * 1.4
    },
    "formatter": function() {
      return this.point.tooltip;
    }
  },
  "title": {
    "floating": true,
    "useHTML": true,
    "style": {
      "zIndex": 1,
    },
    "text": "<a href=\"http://www.google.com\">This is some link as a very long title which will probably wrap a couple of lines</a>"
  },
  "yAxis": {
    "title": null,
    "tickPixelInterval": 72,
    "tickLength": 10,
    "minorTickLength": 8,
    "minorTickWidth": 1,
    "min": 50.6,
    "max": 75.7,
    "plotBands": [{
      "from": 50.6,
      "to": 57.1,
      "color": "#ee2c34",
      "thickness": 15,
    }, {
      "from": 57.1,
      "to": 59.4,
      "color": "#f07627",
      "thickness": 15,
    }, {
      "from": 59.4,
      "to": 64.7,
      "color": "#a88735",
      "thickness": 15,
    }, {
      "from": 64.7,
      "to": 75.7,
      "color": "#2c876d",
      "thickness": 15,
    }]
  },
  "pane": {
    "startAngle": -150,
    "endAngle": 150
  }
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart-2-container' style="width: 400px; height: 300px;">

</div>

(also as a fiddle https://jsfiddle.net/d6q1gt4m/)

The problem is that the background is always behind the title. I could switch to non-html title but then I have the problem that only the 1st line is actually a URL if the title is wrapping (and I need to reapply all my link styles).

Does anyone know how I can get the svg tooltip to appear on top of HTML ?

Note: I would like to avoid having to set useHTML for the tooltip if possible as that opens up another can of worms for me.

Upvotes: 5

Views: 1441

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

With CSS and updating tooltip and tooltip formatter the problem is fixed.

For reference check tooltip

Updated tooltip 

"tooltip": {
    "backgroundColor": "rgba(255,255,255,0)",
    "borderWidth": 0,
    "borderRadius": 1,
    "shadow": false,
    "useHTML": true,
    "style": {
      "color": "#454545",
      "fontSize": 14,
      "fontFamily": "Arial, sans-serif",
      "zIndex": 9999,
      "lineHeight": 1.8
    },
    "formatter": function() {
      return "<div>" + this.point.tooltip + "</div>";
    }
  },

css

.highcharts-tooltip {
  z-index: 9998;
}

.highcharts-tooltip div {
  background-color: white;
  border: 1px solid #E2E2E2;
  opacity: 1;
  z-index: 9999!important;
  padding: 5px
}

Fiddle demo

Upvotes: 1

Related Questions