D3.js tooltip not showing

JavaScript
1

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
https://codepen.io/gladiator_kris/pen/pojgEyQ?editors=0010

 var tooltip = svg.append("div")
                      .attr("id", "tooltip")
                      .style("opacity", 0.8);

    .on("mouseover", function(d) {
      tooltip.style("display", "flex")
             .html(`tooltip`)
             .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:

2

Somebody please help me here.

3

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.

4

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