鼠标移出时工具提示不会消失答案

【问题标题】：Tooltip doesn't disappear on mouseout鼠标移出时工具提示不会消失
【发布时间】：2017-09-06 06:45:36
【问题描述】：

我正在尝试向矩形添加工具提示。它确实会在鼠标指针悬停在条上时弹出，但它不想在 mouseout 事件时消失。我也尝试过使用 div.style("display", "none")，但它也不起作用。由于某种原因，它不想在 mouseout 后再次触发 mouseover 事件。它只是一直显示一个工具提示。

http://bl.ocks.org/edkiljak/dc85bf51a27122380c68909cdd09d388

div.tooltip {
            position: absolute;
            text-align: left;
            padding: 4px;
            font-family: Lato, arial, sans-serif;
            font-size: 14px;
            background: #eee;
            border-radius: 2px;
            border: 1px solid gray;
            pointer-events: none;
        }



var div = d3.select("body")
                .append("div")
                .attr("class", "tooltip")
                .style("opacity", 0);

var bars = barGroup.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            .attr("x", 0)
            .attr("y", function (d) {
                return heightScale(d.Vendor);
            })
            .attr("width", function (d) {
                return widthScale(+d.Share2016)
            })
            .attr("height", heightScale.bandwidth() / 1.1)
            .style("fill", function (d, i) {
                return color(i);
            })
            .on("mouseover",function (d){

                div.transition()
                    .duration(200)
                div
                    .style("opacity", .9)
                    .html("Vendor: " + "<strong>" + d.Vendor + "</strong>" + "<br>" + "Market share in 2016: " + d.Share2016 + "%")
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");


                d3.select(this)
                    .style("fill", "#93ceff")



            })
            .on("mouseout", function(){
                d3.select(this)
                    .transition()
                    .duration(50)
                    .style("fill", function(d,i){
                        return color(i);
                    })

                d3.select(div).remove()

            })

我在这里做错了什么？

【问题讨论】：

我会按照这里的例子。 bl.ocks.org/Caged/6476579 - 你应该使用 d3.tip() - 在这个例子中，看起来你只是将 html 直接附加到 svg，这使得重新选择并删除它变得更加困难。 d3.tip() 会让您的生活更轻松。
这可能有效 .style("visibility", "hidden");而不是 .remove()
@ShaneG 它确实消失了但不再显示，所以必须重新加载页面
鼠标悬停时你能做到吗.style("visibility", "visible");
@ShaneG 它有效！谢谢你，非常感谢。

标签： javascript css d3.js svg tooltip

【解决方案1】：

问题出在这里：

d3.select(div).remove()

由于div 本身就是一个选择，所以您正在选择一个选择，这没有什么意义。

取而代之的是，只需在mouseout 中使用div：

div.remove()

或者，更好的是，只需将其不透明度设置为零：

div.style("opacity", 0)

这是更新后的 bl.ocks，只是进行了更改：http://bl.ocks.org/anonymous/raw/13ce2445b248fb9e44dcd33cfc3dff36/dff0c60423927960cab8aaf9e613c2c3ae205808/

【讨论】：