[Chartjs]-How to make sure tooltips never disappear on hover

by

0👍

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

Leave a comment