Plothover not working for object

Question

I am using Flot's plothover method to create certain actions when the mouse moves within the plot grid. It seems to be working fine for tooltips and highlighting my data points. I have created a vertical bar object that follows the mouse cursor and I only want it visible when the mouse is over the grid. Simply setting the css for the verticalBar to visibility: "hidden" or display: "none" does not seem to work (note: I want to see the vertical bar, but only when the mouse is on the grid). I believe this issue is related to my use of plothover, but I am not sure why it doesn't handle the verticalBar in the same way it is handling the tooltips and highlights.

placeholder = $(element);
        plot = $.plot(placeholder, data, {
          grid: {
            clickable: true,
            hoverable: true,
            color: "white",
            mouseActiveRadius: 100
          },
          tooltip: {
            show: true,
            content: '%y'
          },
          series: {
            lines: {
              show: true
            },
            points: {
              show: true,
              radius: 2.0
            },
            autoHighlight: true,
            highlightColor: "#37FDFC"
          },
          colors: (function() {
            var i, len, ref, results;
            results = [];
            for (i = 0, len = data.length; i < len; i++) {
              l = data[i];
              results.push(((ref = l.lines) != null ? ref.fillColor : void 0) === "#C90E30" ? "#A80C28" : "#357A27");
            }
            return results;
          })(),
          xaxis: {
            show: false
          },
          yaxis: {
            min: params.min(),
            max: params.max(),
            font: {
              size: 10,
              lineHeight: 12,
              color: "#000000"
            },
            ticks: 4,
            minTickSize: 50,
            tickFormatter: function(val, axis) {
              return (val.toFixed(axis.tickDecimals)) + "m";
            },
            tickDecimals: 0
          }
        });
        placeholder.on("plothover", function(event, position, item) {
          var horizontalBounds, leftOffset, pixelCoords, topOffset;
          if (pointsOnly.length >= position.x) {
            pixelCoords = plot.pointOffset({
              x: position.x,
              y: pointsOnly[parseInt(position.x)][2]
            });
            console.log(pointsOnly[parseInt(position.x)][0]);
            if (pointsOnly[parseInt(position.x)][0] === "#439C32") {
              vis = "The target is Visible";
              visLegend.text(vis);
            } else if (pointsOnly[parseInt(position.x)][0] === "#C90E30") {
              vis = "The target is Not Visible";
              visLegend.text(vis);
            }
          }
          leftOffset = plot.getPlotOffset().left;
          topOffset = plot.getPlotOffset().top;
          horizontalBounds = [leftOffset, plot.width() + leftOffset];
          if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
            if (typeof verticalBar !== "undefined" && verticalBar !== null) {
              verticalBar.css({
                transform: "translate(" + position.pageX + "px, 0px)"
              });
            }
          }
          if (position.pageX >= horizontalBounds[0] && position.pageX <= horizontalBounds[1]) {
            return typeof visLegend !== "undefined" && visLegend !== null ? visLegend.css({
              transform: "translate(" + position.pageX + "px, 0px)"
            }) : void 0;
          }
        });
        verticalBar = placeholder.append("<div></div>").children().eq(-1);
        verticalBar.css({
          backgroundColor: "#F7E4E6",
          width: "1px",
          height: "100%",
          position: "absolute",
          padding: 0,
          margin: 0,
          left: 0,
          display: "none",
          transform: "translateX(" + plot.getPlotOffset().left + "px)"
        });
        visLegend = placeholder.append("<div></div>").children().eq(-1);
        visLegend.css({
          border: "1px solid #FF0000",
          backgroundColor: "#ff66cc",
          fontWeight: "bold",
          fontSize: "7",
          color: "#ffffff",
          position: "absolute",
          padding: "1px",
          margin: 0,
          top: -30,
          opacity: 0.5,
          left: 0,
          transform: "translateX(" + plot.getPlotOffset().left + "px)"
        });
        return console.log(plot.getData());
      };
    })(this)
  };
});
return null;

Answer 1

Apparently, there is a flot plugin that does exactly what I was trying to get my verticalBar to do using plothover. The main goal was to get the verticalBar(see my code above), which tracks the mouse cursor using plothover, to disappear when the cursor was off the grid. The crosshair plugin does exactly that. Here is an example of how it operates:crosshair tracking example and here is the documentation and download info: flot.crosshair.js.