Customizing Highcharts - Tooltip Visibility | A Humble Opinion

http://ahumbleopinion.com/customizing-highcharts-tooltip-visibility/ Jugal Thakkar http://jugal.me/

by Jugal Thakkar

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.src.js"></script>
<div id="container"></div>
<input type="checkbox" id="fixed" checked="checked">Always Show</input><br/>
<span id="showContainer" style="display:none" >
    Series Index: <input type="number" id="seriesIndex" value="1"/><br/>
    Point Index: <input type="number" id="pointIndex" value="8" /> <br/>
<input type="button" id="show"  value="Show Tooltip"></input>
</span>

CSS

#container {
    min-width:500px;
}

JavaScript

(function ($) {
    (function (H) {
        H.wrap(H.Tooltip.prototype, 'hide', function (defaultCallback) {
            if ($("#fixed").is(':checked')) {
                //Do Nothing (Do Not Hide)
            } else { // Call the default Hide Callback
                defaultCallback.apply(this);
            }
        });
    }(Highcharts));

    var showTooltip = function () {
        var chart = $("#container").highcharts();
        var seriesIndex=$('#seriesIndex').val();
        var pointIndex=$('#pointIndex').val();
        var tooltipPoint = chart.series[seriesIndex].points[pointIndex];
        chart.tooltip.refresh(tooltipPoint);
    };
    
    var hideTooltip = function () {
        var chart = $("#container").highcharts();        
        chart.tooltip.hide();
    };

    $("#show").click(showTooltip);

    $('#fixed').click(function () {
        if (this.checked) {
            showTooltip();
            $('#showContainer').hide();
        }else{
            hideTooltip();
            $('#showContainer').show();
        }
    });

    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: '<a href="http://ahumbleopinion.com/category/highcharts/">Highcharts @ A Humble Opinion</a>',
            useHTML: true
        },
        credits: {
            text: "Jugal Thakkar",
            href: "http://jugal.me/"
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        series: [{
            name: 'Mumbai',
            data: [24.2, 24.6, 26.7, 28.6, 30.1, 29.0, 27.5, 27.2, 27.4, 28.2, 27.4, 25.6]
        }, {
            name: 'New Delhi',
            data: [14.1, 16.9, 22.4, 28.6, 32.8, 33.8, 31.0, 29.8, 29.2, 26.0, 20.3, 15.4]
        }],
        tooltip: {
           ...