How get close icon(X) on hover on mouseover in d3.js
I have a d3js pie chart which shows hover data. How to get a close icon on hover on the mouse to close that hover. I tried css to get it but not working.
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 + 1).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"); 
The most easy way to create tooltips is by appending a title element. The title element will have the calssical behavior of a tooltip. This could be done without the usage of "mouseover".
paths.append('title').text(''); If you want to stick to your own solution you can revert the "mouseover" event with the usage of the "mouseleave" event.
paths.on("mouseleave", function(d){ d3.select("#" + _this.tooltipId).remove(); }) Addendum to answer your comment. Well, you could try something like this. But i cannot gurantee you that it will work or have no sideeffects.
paths.on("mouseleave", function(d){ setTimeout(() => { d3.select("#" + _this.tooltipId).remove(); }) },10000); // 10000ms => 10 seconds }); Another way would be to use an animation for that:
paths.on("mouseleave", function(d){ d3.select("#" + _this.tooltipId) .remove() .transition() .duration(10000); }); 
