Highcharts - How do I position tooltip behind icon on each pie slice on hover?

Question

I wanted help with the following:

To put html tags on each pie slice(element+class to show icon) and have it positioned behind the hover tooltip?

At the moment I have this:

                          var chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'modules',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                type: 'pie',
                                backgroundColor:"transparent"
                            },
                            credits:{
                                enabled:false
                            },
                            exporting: {
                                enabled: false
                            },
                            title: {
                                text: '',
                                style: {
                                    fontSize: '20px',
                                    color: '#999999',
                                    fontWeight: 'bold',
                                    fontFamily: 'Verdana'
                                }
                            },
                            subtitle:{
                                text: '',
                                style: {
                                    fontSize: '15px',
                                    color: '#999999',
                                    fontFamily: 'Verdana'
                                }
                            },
                            tooltip: {
                              borderWidth: 0,
                                borderColor: null,
                                borderRadius: 0,
                                shadow: false,
                                shape: "callout",
                                pointFormat: "{series.data.name}",
                                backgroundColor: "rgba(0,0,0,0.8)",
                                style: { "color": "#ffffff", "cursor": "default", "fontSize": "12px", "pointerEvents": "none", "whiteSpace": "nowrap" }
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true, // on click pulls segment out
                                    stickyTracking: false, // mouse events
                                    cursor: 'pointer',
                                    followPointer:true,
                                    dataLabels: {
                                        enabled: false, // annotation of each segment
                                        format: '<b>{point.name}</b>',
                                        style: {
                                            color: "#FFFFFF"
                                        }
                                    }
                                },
                                series: {
                                    animation: {
                                        duration: 1000,
                                        easing: 'easeOutBounce'
                                    },
                                    point: {
                                        events: {
                                            mouseOver: function(event) {
                                                var point = this;

                                                if (!point.selected) {
                                                    //chart.tooltip.shared = true;

                                                    timeout = setTimeout(function () {
                                                        point.firePointEvent('click');

                                                        chart.tooltip.shared = false;
                                                        chart.tooltip.refresh(point);
                                                    }, 100);
                                                }
                                            }
                                        }
                                    },
                                    events: {
                                        mouseOut: function() {
                                            chart.tooltip.shared = false;
                                            clearTimeout(timeout);
                                        }
                                    },
                                    dataLabels: {
                                        allowOverlap:false,
                                        enabled: true,
                                        useHTML: true,
                                        format:'{point.icon}',
                                        formatter: function() {
                                            return Math.round(this.percentage*100)/100 + ' %';
                                        },
                                        distance: -70,
                                        color:'#FFFFFF'
                                    }
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Modules',
                                colorByPoint: true,
                                color:'#FFFFFF',
                                data: [
                                    {
                                        name: 'Scheduling',
                                        y: 60,
                                        icon: '<i class="fa fa-book" style="font-size:80px;margin:-20px;"></i>'
                                    },
                                    {
                                        name: 'Budgeting',
                                        y: 60,
                                        icon: '<i class="fa fa-calculator" style="font-size:70px;margin:-24px -20px -20px -40px;"></i>'
                                    },
                                    {
                                        name: 'Attendance',
                                        y: 60,
                                        icon: '<i class="fa fa-user" style="font-size:80px;margin:-40px -15px -40px -15px;"></i>'
                                    },
                                    {
                                        name: 'Reporting',
                                        y: 60,
                                        icon: '<i class="fa fa-bar-chart" style="font-size:80px;margin:-40px -20px -40px -15px;"></i>'
                                    },
                                    {
                                        name: 'Absence',
                                        y: 60,
                                        icon: '<i class="fa fa-bed" style="font-size:80px;margin:-30px -20px -30px 0px;"></i>'
                                    },
                                    {
                                        name: 'Payroll',
                                        y: 60,
                                        icon: '<i class="fa fa-gbp" style="font-size:80px;margin:-10px -20px -20px 10px;"></i>'
                                    }
                                ]
                            }]
                        });

If you hover each slice, the tooltip is behind the font-awesome icon?

Can it be behind?

Answer 1

You need to use an html tooltip instead of an svg tooltip. Set tooltip.useHTML to true.

Disable tooltip's svg box

tooltip: {
  borderWidth: 0,
  borderColor: null,
  borderRadius: 0,
  shadow: false,
  backgroundColor: "none",
  useHTML: true,

Set style in css:

.highcharts-tooltip > span {
  padding: 5px;
  background-color: rgba(0,0,0,0.8);
  background-color: white\9;
  /* < IE11 */
  border: 1px solid #a8a7a5;
  z-index: 9999;
}

Live example and output

https://jsfiddle.net/tz5stfcw/