Flot Tooltip Line Chart

To make tooltip in Flot need a bit of work, since Flot don`t have built-in tooltip options, so you need to implement it by yourself. Flot has 'plothover' event, so you could take advantage of this event to make tooltips appear every time mouse cursor hovers over a data point.
$.fn.UseTooltip = function () {
    var previousPoint = null;
    
    $(this).bind("plothover", function (event, pos, item) {         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                
                var x = item.datapoint[0];
                var y = item.datapoint[1];                
                
                showTooltip(item.pageX, item.pageY,
                  months[x-  1] + "<br/>" + "<strong>" + y + "</strong> (" + 
                  item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
}

Also you need to set 'hoverable' to true in order to fire 'plothover' event.
 grid: {
    hoverable: true,     
    mouseActiveRadius: 30  //specifies how far the mouse can activate an item
}

Tooltip line chart
ExampleTooltip Line Chart
Source Code Expand
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var data9_1 = [
    [1, 1530], [2, 6580], [3, 1980],[4, 6630], [5, 8010], [6, 10800],
    [7, 3530], [8, 7490], [9, 5230],[10, 2580], [11, 6880], [12, 3640]
];

$.fn.UseTooltip = function () {
    var previousPoint = null;
    
    $(this).bind("plothover", function (event, pos, item) {         
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                
                var x = item.datapoint[0];
                var y = item.datapoint[1];                
                
                showTooltip(item.pageX, item.pageY,
                  months[x-  1] + "<br/>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 20,
        border: '2px solid #4572A7',
        padding: '2px',     
        size: '10',   
        'background-color': '#fff',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}


$(function () {        
    $.plot($("#flotcontainer"),
        [{
              data: data9_1,label: "Page View",lines: { show: true},points: { show: true }
            }
        ],{            
            grid: {
                hoverable: true, 
                clickable: false, 
                mouseActiveRadius: 30,
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis:{
                   ticks: [
                            [1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"],
                            [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]
                   ]
            }     
        }
    );

    $("#flotcontainer").UseTooltip();
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>


comments powered by Disqus