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>

Answer 2

I would like to use hide() or show(). change from

div.attr("display", display); 

to

 div.hide();

here is the comments from .hide() or display: none? jQuery "The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css('display', 'none'), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline."

Answer 3

display is not an HTML attribute, this is CSS. You need to change your code to something like this if you want to hide the element:

div.css({ "display": "none" });

Or just use the jQuery shortcut: div.hide();.

Answer 4

This looks like you are following the tutorial here, right down to the extra space before the .html in the mouseover event. (Which is fine...the only reason I recognized that little syntax is because I spent all day staring at it!)

http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

You post the relevant code above, but are you also selecting the div that you want to operate on using the select method? This may be why your transition isn't working the way you want it to.

eg:

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

otherwise or in addition the proper way to get the tooltip to go away is as Gilsha answered above with this line on mouseout:

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