Getting .attr ("display": none) to work with mouseout (D3.js)
I am doing a D3.js interactive visualization with tooltips / tooltips on data points so that on hover event next to the selected point a popup appears with some information
I have currently achieved this with the code below - the tooltip appears on hover. When the user moves the mouse to a different point, the original tooltip disappears and the correct tooltip appears next to the new data point.
However, the mouseout event doesn't work as it should - the tooltip doesn't disappear as soon as the mouse leaves the date point. Unless the user moves the mouse over the 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 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?
Thank!
source to share
none
- line. Thus, you have enclosed it in quotes. Also note that the display is a css style attribute. therefore it should be applied as shown below.
div.style("display","none");
Other alternative options for implementing this are as follows.
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's a snippet of working code.
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>
source to share
I would like to use hide () or show () . change
div.attr("display", display);
to
div.hide();
here are the comments from .hide () or display: none? JQuery "Matching elements will be hidden immediately, no animation. This is roughly equivalent to calling .css (" display "," none "), except that the value of the display property is stored in the jQuery data cache so that the display can be restored to its original state later value. If the element has a display value inline, then it is hidden and displayed, it will be displayed in line again. "
source to share
It looks like you are following the guide here, all the way down to the extra space before the .html in the mouseover event. (Which is good ... the only reason I found out the little syntax is because I've been looking at it all day!)
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html
You post the relevant code above, but you also select the div you want to work with using the select method? This may be why your transition is not 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 correct way to get the tooltip to leave, as Gilsha answered above with this line on the mouse:
div.style("display","none");
source to share