How to use the mouseout event to hide tooltips

A guide for hiding tooltips when the mouse is moved away from the canvas using the mouseout event

[No canvas support]

By using the mouseout event you can easily make a chart where the tooltips are hidden when the mouse is moved away from the canvas. The line chart here show it in action and the code is below. It's a simple matter of adding the mouseout event listener after the chart has been created.

    window.onload = (function ()
        var line = new RGraph.Line({
            id: 'cvs',
            data: [84,86,15,56,53,68,98],
            options: {
                labels: ['Kim','Hoolio','Jack','Jim','Louise','Ringo','John'],
                tooltips: ['Kim','Hoolio','Jack','Jim','Louise','Ringo','John'],
                textAccessible: true,
                textSize: 14

        * This is the event listener that handles the hiding of the tooltip.
        line.canvas.onmouseout = function (e)
            // Hide the tooltip
            // Redraw the canvas so that any highlighting is gone
RGraph on social media