D3.js tooltip not showing - JavaScript - The freeCodeCamp Forum

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

完美的领带 · 浦发银行 | 搜索· 2 月前 ·

买醉的拖把 · 数据库查询 | 中山大学图书馆· 3 月前 ·

爱旅游的荔枝 · 约基奇vs邓肯，谁是更好的大个子球员？_哔哩 ...· 5 月前 ·

正直的皮蛋 · 2023 成吉思汗盃健美全場總冠軍 - ...· 11 月前 ·

强健的煎饼果子 · GISOO通信 - 试一下就知道了 - 博客园· 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:

      freecodecamp.org
              
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