how to get hover removed automatically after some time in d3js
I have a d3js pie chart with different sections. Each section,if you put mouse pointer on it, it will show custom hover data.
whenever I take mouse pointer outside that section hover is still there until I refresh the page. I used mouseout function but with that when I take pointer outside, it will remove hover data immediately.
I want to get hover data removed after a specific time like 10 seconds automatically. How to achieve it? Below is my code i used for mouseover and mouseout.
In code below 1st line in mouseout:
"d3.select("#" + _this.tooltipId).classed("crd3Hidden", true);" If I write true at last hover data will be there until I refresh. For false it wont show hover data if pointer is outside pie section
paths.on("mouseover", function(d){ d3.select("#" + _this.tooltipId) .style("left", (d3.event.clientX + window.scrollX) + "px") .style("top", (d3.event.clientY + window.scrollY) + "px") .select("#value") .html(_this.config.tooltip(d.data, _this.config.label)); d3.select("#" + _this.tooltipId).classed("crd3Hidden", false); var endAngle = d.endAngle + 0.05; var startAngle = d.startAngle - 0.05; var arcOver = d3.svg.arc().innerRadius(innerRadius) .outerRadius(outerRadius + 0.8).endAngle(endAngle).startAngle(startAngle); this.parentNode.parentNode.appendChild(this.parentNode);//the path group is on the top with in its parent group this.parentNode.parentNode.parentNode.appendChild(this.parentNode.parentNode); d3.select(this) .style("stroke", "black")//#5eecfd .style("opacity", 10) .attr("d", arcOver) .style("stroke-width", "4px"); }) paths.on("mouseout", function(d){ d3.select("#" + _this.tooltipId).classed("crd3Hidden", true); var endAngle = d.endAngle; var startAngle = d.startAngle; var arc1 = d3.svg.arc().innerRadius(innerRadius) .outerRadius(outerRadius).endAngle(endAngle).startAngle(startAngle); d3.select(this) .style("stroke", "#145A32") .style("opacity", 1) .attr("d", arc1) .style("stroke-width", "2px"); }); 
