add tooltip to flot chart

Question

I am new to charts but I've been trying to add a tooltip to a chart for last couple hours and I just kept failing all I want is do add a tooltip on points hover with text - point_number + "rating"

$(function () {
    var plot = $.plot($("#placeholder"),[ 
        { data: [[0,30],[1,20],[2,0],[3,50],[4,80],[5,16],[6,10],[7,100],[8,80],[9,100]], color: '#8edf00'}
    ], {
        series: {
            lines: { show: true, fill: true, fillColor: '#daff93' },
            points: { show: true}
        },
        grid: { 
            color: 'transparent',
            margin: 10
        },
        xaxis: { 
            min:1,
            color: '#777',
            font: { color: '#777777', family: 'sans-serif', size: 11}
        },
        yaxis: { 
            max: 100,
            min: 0,
            color: '#777',
            font: { color: '#777777', family: 'sans-serif', size: 11}
        }
    });
});

jsfidie

The problem is, I want to keep the chart as simple as possible, but all the charts examples with tooltip extremely messy all around the net, so i haven't really find any good tutorial to do that.

Answer 1

EDIT: if fixed your example http://jsfiddle.net/Margo/84xgs6we/2/

Hei, please take a look how i did it here http://jsfiddle.net/yKG7X/31/

var plot;
$(function() {
     //Add tooltip
    $("#placeholder").bind("plothover", function (event, pos, item) {
 if (item) {  
                $("#tooltip").remove();

                var x = item.datapoint[0],
                    y = item.datapoint[1];
                showTooltip(item.pageX, item.pageY, x + " / " + y );
                }
}); 
var d2 = [[0, 1], [1, 2], [2, 3],[3, 4]];

var data = [
{
    color:1,
    data: d2
}];

var conf = {
    lines: { show: true },
    points: { show: true },
    grid: { hoverable: true, clickable: true },
};

plot = $.plot($('#placeholder'), data, conf);

}); 

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

hope it clears it up! good luck