Grid Configuration Requirement

Before enabling the tooltip functionality, the Flot grid must have hover events activated:

grid: {
  hoverable: true
}

Without setting hoverable to true, the tooltip plugin will not respond to mouse interactions.

Available Options

tooltip: {
    show:           boolean,                // false
    cssClass:       string,                 // "flotTip"
    content:        string | function,      // "%s | X: %x | Y: %y"
    xDateFormat:    string,                 // null
    yDateFormat:    string,                 // null
    monthNames:     string,                 // null
    dayNames:       string,                 // null
    shifts: {
        x:          int,                    // 10
        y:          int                     // 20
    },
    defaultTheme:   boolean,                // true
    lines:          boolean,                // false
    onHover:        function(flotItem, $tooltipEl),
    $compat:        boolean                 // false
}

Option Descriptions

Option	Description
show	Enables the tooltip when set to true. Requires grid.hoverable to also be enabled.
cssClass	CSS class name applied to the tooltip container element. Defaults to "flotTip".
content	Defines tooltip content. Supports placeholders: %s (series label), %x (X value), %y (Y value), %p (percentage). HTML markup is supported.
xDateFormat	Date format string for X-axis values in time mode.
yDateFormat	Date format string for Y-axis values in time mode.
monthNames	Custom month name array for date formatting.
dayNames	Custom day name array for date formatting.
shifts	Pixel offset from cursor position. Negative values shift the tooltip left/up.
defaultTheme	Enables built-in default styling. Set to false for custom CSS styling using the cssClass selector.
lines	Anables tooltips when hovering over line segments between data points.
onHover	Callback function executed on hover. Receives the hovered item and tooltip element as parameters.
$compat	Compatibility mode for jQuery versions earlier than 1.2.6.

Content Formatting Details

Precision Specifiers: Append .precision to numeric placeholders to control decimal rounding:

content: "X: %x.2 | Y: %y.4"

This rounds X to 2 decimal places and Y to 4 decimal places.

Custom Callback Function: For advanced formatting, provide a function that receives series label, x value, y value, and the flot item:

content: function(label, xval, yval, flotItem) {
    return `<strong>${label}</strong><br/>Value: ${xval.toFixed(2)}`;
}

Returning false or an empty string suppresses the tooltip for that data point.

Additional Placeholders:

• %lx, %ly — Work with the flot-axislabels plugin
• %ct — Custom label text placeholder
• %n — Total sum of pie chart slices (instead of percentage)