flot chart hoverable markings

Question

I made a few graphs with the possibility of putting a mark inside, but I don't understand how to make the mark hoverable with the y-axis value.

$.plot($("#flot-chart-@ControlID"), series_@ControlID, {
        series: {
            lines: {
                lineWidth: 2,
                fill: @((Model.Series.Count() == 1).ToString().ToLower()),
            },
            bars: {
                barWidth: 0.6,
                align: "center"
            },
            points: {
                fill: @((Model.Series.Count() == 1).ToString().ToLower()),
            }
        },
        xaxis: {
            ticks: xlabels_@ControlID,
            tickDecimals: 0
        },
        colors: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())),
        grid: {
            color: "#999999",
            hoverable: true,
            clickable: true,
            borderWidth: 0,
            @if (Model.LimitLine != null)
            {
                <text>
                    markings: [
                        { color: '#000', lineWidth: 1, yaxis: { from: @Model.LimitLine, to: @Model.LimitLine }},
                    ]
                </text>
            }
            },
        legend: {
            show: true
        },
        tooltip: true,
        tooltipOpts: {
            content: function(label, xval, yval) {
                var content = getLabel_@(ControlID)(xval) + ": " + yval;
                return content;
            },
        }
    });

How can i show a tooltip with the value?
Graph example:

Answer 1

You can't do that with the tooltips plugin, but it is possible when doing the tooltips yourself. Something like this:

$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) { // hovering over a datapoint
        var x = item.datapoint[0].toFixed(2),
            y = item.datapoint[1].toFixed(2);

        $("#tooltip").html(item.series.label + " of " + x + " = " + y)
            .css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
    } else {
        var hideTooltip = true;

        // you need to save the Flot object for this (here as "plot")
        $.each(plot.getOptions().grid.markings, function(idx, marking) {
            if (Math.abs(pos.y - marking.yaxis.to) < 10) {
                $("#tooltip").html("Limit: " + marking.yaxis.to)
                    .css({top: pos.pageY + 5, left: pos.pageX + 5}).fadeIn(200);
                hideTooltip = false;
                return false;
            }
        });

        if (hideTooltip) {
            $("#tooltip").hide();
        }
    }       
});

Based on this example.