Override table cell background color in highcharts-tooltip

Question

I'm creating Splunk dashboards. For my tables I have a style sheet called application.css that alternates the color of the table rows, per requirements. Unfortunately when using charts the highcharts-tooltip is basically a table and it is rendered with alternating colors for the rows. As a result the value row is a very light green background with white text. The text cannot be read.

It looks like the highcharts-tooltip is generated by a java script.

This is how the tooltip is rendered in the page:

<table class="highcharts-tooltip">
<tbody>
  <tr>
   <td style="text-align: left; color: rgb(204, 204, 204); max-width: 120.34px;">    WebPage:&nbsp;&nbsp;</td>
   <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">\\x94/bla/bla/Browse.html\\x94</td>
  </tr>
  <tr>
   <td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits:&nbsp;&nbsp;</td>
   <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">12</td>
  </tr>
  <tr>
   <td style="text-align: left; color: rgb(30, 147, 198); max-width: 120.34px;">Hits%:&nbsp;&nbsp;</td>
   <td style="text-align: right; color: rgb(255, 255, 255); max-width: 504.65px;">24.49%</td>
  </tr>
</tbody>
</table>

The second tr is the one that cannot be read. My question is, is there a way to override the alternating row colors in the tooltip using css in my application.css file so that the row is not rgb(255,255,255) but rgb(00,00,00)?

You don't describe how you are generating your highcharts code but here is the API doc on how to format your tooltip: api.highcharts.com/highcharts#tooltip — wergeld
The highcharts are generated within the Splunk package. I have no control over their generation. the best I can do is to try to override the css style. — kjmatt

Luca Regazzi Luca Regazzi · Accepted Answer · 2016-06-08T19:05:21

Using !important might be the only way of overriding the in-line style. Keep in mind this solution will change the color of td even in tooltips of other charts. Prepend the selector with the #[CHART CONTAINER ID] to avoid that.

Css:

table.highcharts-tooltip tbody tr td:nth-child(2){
  color: #000000 !important;
}

nth-child browser compatibility

Override table cell background color in highcharts-tooltip

1 Answers