Flot line chart tooltip

Question

I tried using the tooltip for flot in a separated js but it does not seem to work. (I only get to see the border) My chart is getting data from jquery every 1000 milliseconds and then shifting the first few values if the data gets too much. Thanks in advance!

Start of java script and half of what would make up the tooltip:

$(document).ready(function () {
    let previousPoint = null, previousLabel = null;
    function showTooltip(x, y, color, contents) {
        //console.log(contents);
        $(`<div id="tooltip">${contents}</div>`).css({
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            border: `2px solid ${color}`,
            padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }
    

Grid Options for chart:

        grid: {
            hoverable: true,
            clickable: true,
            borderWidth: 3,
            mouseActiveRadius: 50,
            axisMargin: 20
        }

Get new data:

function newData(){
//get data from ajax and push to dataset
            
        }

Function to refresh chart + draw tooltip:

    setInterval(function(){ 
        newData();      
        plot.setData(dataset);
        plot.setupGrid(); //only necessary if your new data will change the axes or grid
        plot.draw();
        $("#allcars").on("plothover", function (event, pos, item) {
            if (item) {
                console.log(item.series.label);
                if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#tooltip").remove();

                    var x = item.datapoint[0];
                    var y = item.datapoint[1];

                    var color = item.series.color;
                    console.log(item.pageX);
                    //console.log(item.series.xaxis.ticks[x].label);               

                    showTooltip(item.pageX,
                    item.pageY,
                    color,
                            "<strong>" + item.series.label + "</strong>"  +
                            " : <strong>" + y + "</strong> ");
                }
            } else {
                $("#tooltip").remove();
                console.log("Hmm no points?");
                previousPoint = null;
            }
});
    },1000);
});//document ready