D3.js tooltip not showing

Tell us what’s happening:
Everything else works, just not the tooltip. I cant figure what I am doing wrong here.

Your code so far

 var tooltip = svg.append("div")
                      .attr("id", "tooltip")
                      .style("opacity", 0.8);
    .on("mouseover", function(d) {
      tooltip.style("display", "flex")
             .style("left", (d3.event.pageX + 10)+"px")
             .style("top", (d3.event.pageY - 28) + "px")
    .on("mouseout", () => {
      tooltip.style("display", "none")

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.92 Safari/537.36.

Challenge: Visualize Data with a Choropleth Map

Link to the challenge:

Somebody please help me here.

So I solved this by appending tooltip to the body element but would like to know why it didnt work when appended to the svg element.

Hey, I’m learning D3.js now.

You can’t append HTML to SVG (technically you can with foreignObject , but it’s a rabbit hole and it’s not supported by IE).
You can however try to use element as it serves similar purpose as <div> by grouping objects. Example here