Add a tooltip to a D3 horizontal bar chart

I’m trying to add a tooltip popup to show the year and the value when I hover the mouse over the bar. But for some reason, all the options I have tried do not work. Anyone have any solutions?

I have tried a variation of this link here but have had no luck. In many cases, the tooltip does not appear in the right location.

Could someone help to create a minimalistic solution?

HTML

            <div class="bar-chart-container">
                <svg class="bar-chart"></svg>
            </div>

JAVASCRIPT

// Bar chart
function startBarChartAnimation() {
    if (isInViewport(document.querySelector(".bar-chart-container"))) {
        const data = [
            { year: "2019", value: 11 },
            { year: "2020", value: 10 },
            { year: "2021", value: 23 },
            { year: "2022", value: 37.4 },
        ];

        const svg = d3.select(".bar-chart");
        const margin = { top: 20, right: 20, bottom: 20, left: 60 };
        const width = parseInt(window.getComputedStyle(document.querySelector(".bar-chart-container")).width) - margin.left - margin.right;
        const height = parseInt(window.getComputedStyle(document.querySelector(".bar-chart-container")).height) - margin.top - margin.bottom;

        svg.attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

        // Add the gradient definition
        const gradient = svg.append("defs")
            .append("linearGradient")
            .attr("id", "bar-gradient")
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("x1", 0)
            .attr("y1", 0)
            .attr("x2", width)
            .attr("y2", 0);

        gradient.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", "#80bede");

        gradient.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", "#acd6d9");

        const x = d3.scaleLinear()
            .domain([0, d3.max(data, d => d.value)])
            .range([0, width]);

        const y = d3.scaleBand()
            .domain(data.map(d => d.year))
            .range([0, height])
            .padding(0.3);

        const g = svg.append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);

        // Create and append the bars
        g.selectAll(".bar")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("y", d => y(d.year))
            .attr("height", y.bandwidth())
            .attr("fill", "url(#bar-gradient)")
            .attr("width", 0)
            .transition()
            .duration((d, i) => 500 + i * 200)
            .attr("width", d => x(d.value))

        g.append("g")
            .call(d3.axisLeft(y))
            .call(g => g.selectAll("line").remove()) // Remove y-axis lines
            .call(g => g.selectAll("path").remove()) // Remove y-axis lines
            .call(g => g.selectAll("text") // Change font color of y-axis labels
                .style("fill", "#bbbbbb") // Change the fill color here
            );


        // Remove the scroll event listener once the animation is triggered
        window.removeEventListener("scroll", startBarChartAnimation);
    }
}

window.addEventListener("scroll", startBarChartAnimation);