d3.tip

[mike-bales]

I'm trying to use d3.tip but it doesn't seem to be working. I suspect that it no longer works with d3 v4.0 but I couldn't figure out how to confirm this. I'm getting an error that d3.functor is not a function. And when I look in the documentation I can find d3.functor in the v3.x docs but not v4.0 docs. Only thing is I can't find any documentation of this change in the change log for d3.

I'm going to try to implement tooltips using some blocks I found but if there is a workaround that still lets me use d3.tip with 4.0 someone let me know.

[alexcengler]

It's definitely not working in d3.v4

Here's a kinda hacky solution I used for a map. I'm essentially just created a div of opacity 0, then whenever there's a mouseover on an element (in this case a map) the div is located close to the svg object, given opacity, and has text added within it. Let me know if this helps.

    chart.tooltip = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);

    chart.map
        .on("mouseover", function(d) {   
            chart.tooltip.transition()        
                .duration(200)      
                .style("opacity", 1)
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");

            chart.tooltip.append("p")
                .attr("class", "tooltip_text")
                .html( d.properties.name + ": " + d.properties.value_2013 + "%" )
        })        
        .on("mouseout", function(d) {       
            chart.tooltip.html("")
                .transition()        
                .duration(500)      
                .style("opacity", 0)
        });

And some CSS:

div.tooltip {   
    position: absolute;         
    text-align: center; 
    vertical-align: middle;        
    padding: 5px;               
    background: white; 
    border: 0px;        
    border-radius: 6px;         
    pointer-events: none;           
}

p.tooltip_text {
    font: 400 16px/24px Lato, sans-serif;
    margin: 0 0 .5em;
    color: #666;
}

[cenglish89]

A lot of my project was going to be based on tooltip functionality, so I'm really hoping there's an easy work around. I came across this thing while googling, maybe its possible to edit it to solve the functor problem?

https://github.com/jfsiii/d3-functor/blob/master/index.js

[mike-bales]

I ended up using this block to build my tooltip. Wasn't that much more difficult than using d3.tip http://bl.ocks.org/d3noob/a22c42db65eb00d4e369