tooltip

// http://stackoverflow.com/questions/20552830/d3-js-arrow-like-path-around-text

by Igor Cuckovic

HTML

<svg width="500" height="500">
    <g class="tooltip" transform="translate(50,150)rotate(-14.999999999999998)">
        <path d="M0,0l10, -10h118v20h-118z"></path>
        <text dy=".35em" x="10" style="text-anchor: start; font-weight: 700;">Alabama
            <tspan style="font-weight: 500;">Crimson</tspan>
        </text>
    </g>
</svg>

CSS

.tooltip text {
    font: 12px/1.2em"Georgia";
}
.tooltip path {
    fill: #fff;
    stroke: #777;
    stroke-width: 1.5px;
}

JavaScript

// http://stackoverflow.com/questions/20552830/d3-js-arrow-like-path-around-text


function h(e) {
    if (e) {
        f(e.school.name);
        var t = c(e.y),
            a = t > 860;
        B.style("display", null).attr("transform", "translate(" + (a ? t - 2 : t + 2) + "," + Math.round(l(e.date)) + ")rotate(0)").interrupt().transition().ease("elastic").attr("transform", "translate(" + (a ? t - 2 : t + 2) + "," + Math.round(l(e.date)) + ")rotate(" + (a ? 15 : -15) + ")"), M.style("text-anchor", a ? "end" : "start").attr("x", a ? -10 : 10).text(e.school.name).style("font-weight", "700").append("tspan").style("font-weight", "500").text(" " + e.school.team);
        var n = M.node().getComputedTextLength() + 5;
        j.attr("d", a ? "M0,0l-10,-10h" + -n + "v20h" + n + "z" : "M0,0l10,-10h" + n + "v20h-" + n + "z")
    } else f(null), B.style("display", "none")
}

var B = u.append("g").attr("class", "tooltip").style("display", "none"), 
                j = B.append("path"), 
                M = B.append("text").attr("dy", ".35em").attr("x", 10);
                
            u.append("g").attr("class", "voronoi").selectAll("path").data(d3.geom.voronoi().y(function(e) {
                return l(e.date)
            }).x(function(e) {
                return c(e.y)
            }).clipExtent([[-40, -40], [s + 40, i + 40]])(g.filter(function(e) {
                return !isNaN(e.y)
            }))).enter().append("path").attr("d", function(e) {
                return "M" + e.join("L") + "Z"
            }).on("mouseover", function(e) {
                h(e.point)
            }).on("mouseout", function() {
                h(null)
            }).on("click", function(e) {
                f(null), y(e.point.school.name), d3.event.stopPropagation()
            }), d3.select(window).on("click", function() {
                y(null)
            })