CODEWITHSUNDEEP
javascripthtmljquerycssd3.js
Ac9293
Ac9293

Reputation: 85

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");

Upvotes: 0

Views: 349

Answers (1)

Lennart Sina
Lennart Sina

Reputation: 36

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);    
});

Upvotes: 1

Related Questions