How to do tooltips never hide in Chart.js?

Question

The chart works great:

var context = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(context).Line({
    labels: all_labels_html,
    datasets: [{
        fillColor: "transparent",
        strokeColor: "#841354",
        pointColor: "#f0ab0f",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#841354",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: returnDadosFromDadosJson(dataJson, 'class', 'row-bold')
    }]
}, {
    scaleShowGridLines : false,
    pointDotRadius: 6,
    pointHitDetectionRadius: 20,
    datasetStroke: true,
    datasetStrokeWidth: 3,
    showTooltips: true
});

But, need I add something then it will never hide?

Actually, it only display when mouse goes over. I need it to show and never more hide.

Thanks in advance.

Answer 1

Take a look at this answer. Basically it contains a function which prevents the tooltip from closing on mouse out.

Answer 2

Add this to your options:

options: {
    onAnimationComplete: function()
    {    
        this.showTooltip([this.datasets[0].points[your_point]], true);          
    },
    tooltipEvents: []
}

• The first parameter is a function that shows the tooltip at the index you choose.
• The second parameter clears tooltip events (which stops the tooltip from disappearing)

Something to be aware of: I seem to remember that you may run into issues if you are using more than one dataset.