CODEWITHSUNDEEP
javascriptjqueryd3.js
BonifatiusK
BonifatiusK

Reputation: 2331

Tooltip in linegraph doesn't show using d3-tip

I've got this linechart, on each value in the chart I am placing a dot. when hovering over the dot I would like to show the value using a d3-tip tooltip.

Here is what I got so far:

var svg = chart.append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight)
        .append("g")
        .attr("transform", "translate(0,10)");

newData.graphSeries.forEach(function (current, index, all) {

    //current = this exact part of the array
    //index = the array index nr [0][1][2] etc
    //all = the complete array
    var graph = current.Values,
        color = current.Color;

    var nextLine = d3.svg.line()
        .interpolate(current.Interpolate)
        .x(function (d) {
            return x(d.x);
        })
        .y(function (d) {
            return y(d.y);
        });

    svg.append("path")
        .datum(graph)
        .attr("transform", "translate(" + yAxisWidth + ",0)")
        .attr("class", "line stroke-" + color)
        .attr("d", nextLine);

    //Placing tooltips
    if (current.Tooltips == true) {

        var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function(d) {
                return "<strong> TEST: " + newData.y.Unit + "</strong><span>" + d.x + "</span>"
            });

        //create circles to place the tooltip on
        svg.selectAll('dot')
            .data(graph)
            .enter().append("circle")
            .attr("r", 3,5)
            .attr("style", "cursor: pointer")
            .attr("class", "circle-" + color)
            .attr("transform", "translate(" + yAxisWidth + ",0)")
            .attr("cx", function(d) { return x(d.x) })
            .attr("cy", function(d) { return y(d.y) })
            .on('mouseover', tip.show )
            .on('mouseout', tip.hide);

        svg.call(tip);
    }

});

I checked if d3-tip exists in the code and it does. I can console.log the tip variable, also the dots are showing and even the mouseover and mouseout are working correctly.

Still somehow tip.show doesn't seem to work. I thought maybe it would show somewhere else in the document, but can't see it anywhere.

Could you please help out.

Best,

Bart

Upvotes: 1

Views: 365

Answers (1)

BonifatiusK
BonifatiusK

Reputation: 2331

The problem was actually easier to solve then expected.

The tooltip might be 'pushed' away by all other html code. Adding .style('z-index', '99999999999'); will help to get that straight.

See: 

 var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .style('z-index', '99999999')
        .html(function(d) {
            return "<strong> TEST: " + newData.y.Unit + "</strong><span>" + d.x + "</span>"
        });

Upvotes: 3

Related Questions