Customize tooltip in FLOT graph

Question

I am using FLOT to display graphs.

To display tootip i am using https://github.com/krzysu/flot.tooltip.

Now I want to customize content of tooltip so I am using callback to set content of tooltip. Code snippet:

tooltip: true,
  tooltipOpts: {
    content: function(label, xval, yval, flotItem){
      var xAxis = plot.getXAxes();
      return xval;
    },
    defaultTheme: false
} 

But its giving me error

caught TypeError: Object function (label, xval, yval, flotItem){
            var xAxis = plot.getXAxes();
            return xval;
           } has no method 'replace' 

Could any one help me ?

Thanks in advance.

Answer 1

I'm not using the flot tooltip. There is easier way to show tooltip and customize it. Check out this fiddler:

http://jsfiddle.net/Margo/yKG7X/5/

$("#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 );
                }
});

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',
        opacity: 0.80
    }).appendTo("body").fadeIn(200).fadeOut(6000);
}

Hope it helps :)

Answer 2

The documentation states that:

If you require even more control over how the tooltip is generated you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.

xval is the numeric x axis value where the tooltip is located. It is not a string. The replace method it is failing on is the standard string.replace:

 > "".replace
 function replace() { [native code] }