Getting .attr("display":none) to work on mouseout (D3.js)

Question

I am making an interactive D3.js visualization with popup/tooltips to the data points so that on a mouseover event, a popup will appear next to the selected point with some information

Currently I have achieved this with the code below - the tooltip appears on mouseover. When the user moves the mouse to another point, the original tooltip disappears and the correct tooltip appears next to the new data point.

However, the mouseout event is not functioning as it should - the tooltip is not disappearing once the mouse leaves the datapoint. If the user does not move the mouse over a new data point, for example, the old tooltip remains there.

Relevant bits of code:

   svg.selectAll("path")
        //other stuff here
        .on("mouseover", function(d) {      
            div.transition()                
                .duration(200)   //mouseover transition does not seem to work, but that's minor
                .style("opacity", .8);      
            div .html(d.datetime.substring(0,10) )  
                .style("left", (d3.event.pageX + 5) + "px")     
                .style("top", (d3.event.pageY - 24) + "px")
                .attr("display", display);    
            })                  
        .on("mouseout", function(d) {       
            div.attr("display", none);   
        })

    //bit of code where I append the tooltip to the right element
    var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", .8);  
    });     

What am I doing wrong?

Thanks!

Answer 1

none is a string. So you have to enclose it in quotes. Also note that display is a css style attribute. So it should be applied as shown below.

div.style("display","none");

Other alternative options for implementing the same are the following.

Option 2:

div.attr("hidden",true);//to hide
div.attr("hidden",null);//to show

Option 3:

div.style("opacity",0);//to hide
div.style("opacity",1);//to show

Here is a working code snippet.

var button = d3.select("body")
               .append("button")
               .text("Mouse Over Me");

button.on("mouseover",function(){    
    div.style("display","block");  
});
button.on("mouseout",function(){    
    div.style("display","none");  
});
var div = d3.select("body")
        .append("div")   
        .attr("class", "tooltip")               
        .style("display", "none")
        .text("Hello This is a sample");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>