remove tooltip space between border and content highcharts

Question

i'm using highcharts for genetating graphs, problem is, highcharts is generating space between border and content of Tooltip and labels of the Pie diagram is visible between that generated space. can any has solving for my problem.

Please check with below example.

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'graf1',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },

            title: {
                margin: 40,
                text: 'Podíl všech potřeb'
            },
            tooltip: {
                borderWidth: 1,
                backgroundColor: "rgba(255,255,255,0)",
                borderRadius: 0,
                shadow: false,
                useHTML: true,
                percentageDecimals: 2,
                backgroundColor: "rgba(255,255,255,1)",
                formatter: function () {
                    return '<div class="tooltop">'+this.point.name + '<br />' + '<b>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</b></div>';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        zIndex: 1,
                        enabled: true,
                        color: '#000000',
                        connectorWidth: 2,
                        useHTML: true,
                        formatter: function () {
                            return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Potřeba',
                data: [
                    ['Firefox', 45.0],
                    ['IE', 26.8], {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    }, ['Safari', 8.5],
                    ['Opera', 6.2],
                    ['Others', 0.7]
                ]
            }]
        });
    });
});

.label {
 z-index: 1!important;
}

.highcharts-tooltip span {
    background-color:white;
    border:1px solid green;
    opacity:1;
    z-index:9999!important;
}

.tooltip {
    padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>

tooltip space between order and content highcharts

Answer 1

SVG tooltip elements can be hidden through:

        tooltip: {
            borderWidth: 0,
            backgroundColor: "rgba(255,255,255,0)",
            shadow: false,

Example: http://jsfiddle.net/x8Lq0yr9/1/

This will eliminate the space between border and HTML content.