How to add tooltip to axis label with jQuery Flot

Question

I've created flot chart with jQuery Flot but right now, I have long label on x-axis and it was truncated with ... at the end of string.

I need to add a tooltip on x-axis label to see the full label.

I've attached the screenshot.

Or is there way to customize the rendering axis-label(HTML)?

Thanks

Answer 1

Similar question already answerd by: Mark in Question

Here's an attempt to use your CSS and make some on the fly adjustments so things will fit:

// push the labels down half their width
// while we are at it find longest label height
var longest = -1;
$('#flot_chart .xAxis .tickLabel').each(function(){
   var self = $(this);
   var width = self.width();
   self.css('top',parseInt(self.css('top')) + width/2 - 5);
    if (width > longest){
        longest = width;
    }
});

// now adjust the chart height so we don't overflow
$("#flot_chart").height($("#flot_chart").height() + longest - $('#flot_chart .xAxis .tickLabel').height() + 5);

JSFiddle

Answer 2

I've fixed this add by passing over the HTML string in ticks options.

JQuery Flot inject the HTML string in float-x#-label container.