d3.js not showing tooltip on mouseover

D3.js won’t show tooltip. I can see in the html that a rect is shown with proper styling as I add on the element definition, even though mouseover is triggered(used console.log to check), but the new styling doesn’t apply to elements. Please find the code below

const tooltip = svg.selectAll(".tooltip").data(jsonData).enter().append("div").attr("class", "tooltip")
        .attr("x", (d) => x(d['candles']['time'].substring(11, 16)))
        .attr("y", (d) => y(Math.max(parseFloat(d['candles']['mid']['o']), parseFloat(d['candles']['mid']['c']))) + Math.abs(y(parseFloat(d['candles']['mid']['o'])) - y(parseFloat(d['candles']['mid']['c']))))
        .attr("width", x.bandwidth())
        .attr("height", (d) => Math.abs(y(parseFloat(d['candles']['mid']['o'])) - y(parseFloat(d['candles']['mid']['c']))))
        .style("visibility", "hidden").      // Tried display:none and opacity: 0 too, doesn't work
        .select("text")
        .attr("fill", "black")


        // Draw candlesticks
        svg
        .selectAll(".candlestick")
        .data(jsonData)
        .enter()
        .append("rect")
        .attr("class", "candlestick")
        .attr("x", (d) => x(d['candles']['time'].substring(11, 16)))
        .attr("y", (d) => y(Math.max(parseFloat(d['candles']['mid']['o']), parseFloat(d['candles']['mid']['c']))))
        .attr("width", x.bandwidth())
        .attr("height", (d) => Math.abs(y(parseFloat(d['candles']['mid']['o'])) - y(parseFloat(d['candles']['mid']['c']))))
        .attr("fill", (d) => (parseFloat(d['candles']['mid']['o']) > parseFloat(d['candles']['mid']['c']) ? "red" : "green"))
        .attr("stroke", "black")
        .on("mouseover", (d, i) => {
            tooltip
                        .style("visibility", "display");  // as above tried display and opacity too
        })