How to use the mouseout event to hide tooltips

Recommend RGraph:  
    Read comments...

Summary
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.


<script>
    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
            }
        }).draw()



        /**
        * This is the event listener that handles the hiding of the tooltip.
        */
        line.canvas.onmouseout = function (e)
        {
            // Hide the tooltip
            RGraph.hideTooltip();
            
            // Redraw the canvas so that any highlighting is gone
            RGraph.redraw();
        }
    })
</script>

Comments