How to make sure tooltips never disappear on hover

Question

I'm implementing a line chart with lots of points. I currently have the hover / tooltip configured with:

hover: {
  mode: "x-axis"
},
tooltips: {
  mode: "x-axis"
}

With this implementation, the tooltip appears + disappears whenever I move the mouse, which can be distracting if I move the mouse quickly. Is there a way to make sure that the tooltip never disappears while the mouse is hovered over the plot area?

Specifically, if my cursor is on point A, I'd like the tooltip for point A to be visible. As I move the cursor toward point B, I'd like the tooltip for point A to remain visible until I'm halfway to point B, at which point I'd like the tooltip to jump over to point B.

What's the best way to accomplish this?

Philippe V. Philippe V. · Accepted Answer · 2016-10-13T23:35:35

You may want to find the closest point to your mouse when you enter the plot area and display the tooltip of that point.

I suggest you read this great post that explains quite well how you can produce great tooltips. The post above does not show any text over the points, but the logic is exactly the same for what you want to do. The crucial piece of code is:

// append the rectangle to capture mouse               
    svg.append("rect")                                     
        .attr("width", width)                              
        .attr("height", height)                            
        .style("fill", "none")                             
        .style("pointer-events", "all")                    
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);                       

    function mousemove() {                                 
        var x0 = x.invert(d3.mouse(this)[0]),              
            i = bisectDate(data, x0, 1),                   
            d0 = data[i - 1],                              
            d1 = data[i],                                  
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;

        //you may want to change that to select a text area rather than a circle - whatever object is your tooltip in your code
        focus.select("circle.y")                           
            .attr("transform",                             
                  "translate(" + x(d.date) + "," +         
                                 y(d.close) + ")");        
    }

How to make sure tooltips never disappear on hover

1 Answers