tooltip not working as body has other elemnts

[Faisal-nfl]

In body I have left menu bar and lot of other elements in BODY before div#venn with this line

var tooltip = d3.select("body").append("div")
        .attr("class", "venntooltip");

tooltip hides behind the left menu bar

and if I use following in i.e use #venn instead of body

var tooltip = d3.select("#venn").append("div")
        .attr("class", "venntooltip");

Than tooltip shows at bottom of graph (my page),

Why tooltip not on of graph? How to handle such case

[benfred]

There is some CSS that goes along with the tooltip example: http://benfred.github.io/venn.js/examples/intersection_tooltip.html

With the CSS there, the tooltip should be invisible when first added - and only made visible when the mouse moves over the diagram.

It works for me at least - here is an example of a page with lots of other elements: http://www.benfrederickson.com/distance-metrics/

[Faisal-nfl]

thanks for reply, venntooltip class was not picked, Working fine now

[suchetaswabhav]

How did you fix it ?? What is the css ? Because i am facing the same issue.

Was it this CSS -

body { font: 12px Arial;}

path { stroke: steelblue; stroke-width: 2; fill: none; }

.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; }

div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
/ background: lightsteelblue; / border: 0px;
border-radius: 8px;
/ pointer-events: none; / }

But still the code is not working .

My code -

var sets; // document.getElementById("venn").innerHTML = localStorage.getItem("set");

sets = JSON.parse(localStorage.getItem("sets"));

console.log("sets=",sets) console.log("sets.length = ", sets.length)

var lengthWidthHeights = [ // min, max, width, height [0, 24, 500, 500], [25, 50, 1000, 800], [51, 100, 1300, 1300], [101, 150, 1500, 1600], [151, 250, 1700, 1900], [251, 350, 2000, 2500], [351, 450, 2500, 3000], [451, 550, 3000, 3500] ]; var { length } = sets; console.log("length =", length); var chart; var foundItem = lengthWidthHeights.find(([min, max]) => length >= min && length <= max); if (foundItem) { console.log("inside foundItem =", foundItem); const [,,width, height] = foundItem; chart = venn.VennDiagram().width(width).height(height);

}

d3.select("#venn").datum(sets).call(chart);

// ------------------ Tool Tip code - Bennfred.js ---------------

var div = d3.select("#venn") div.datum(sets).call(venn.VennDiagram());

// add a tooltip var tooltip = d3.select("#venn").append("div") .attr("class", "venntooltip");

// add listeners to all the groups to display tooltip on mouseover div.selectAll("g") .on("mouseover", function(d, i) { // sort all the areas relative to the current item venn.sortAreas(div, d);

    // Display a tooltip with the current size
    tooltip.transition().duration(400).style("opacity", .9);
    tooltip.text(d.size + " users");

    // highlight the current path
    var selection = d3.select(this).transition("tooltip").duration(400);
    selection.select("path")
        .style("stroke-width", 3)
        .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
        .style("stroke-opacity", 1);
})

.on("mousemove", function() {
    tooltip.style("left", (d3.event.pageX) + "px")
           .style("top", (d3.event.pageY - 28) + "px");
})

.on("mouseout", function(d, i) {
    tooltip.transition().duration(400).style("opacity", 0);
    var selection = d3.select(this).transition("tooltip").duration(400);
    selection.select("path")
        .style("stroke-width", 0)
        .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
        .style("stroke-opacity", 0);
});

// Tool Tip code ends

// ------------ Tool tip code 2 - Simple d3.js---------------

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");

var sampleSVG = d3.select("#venn") .append("svg") .attr("class", "sample") .attr("width", 300) .attr("height", 300);

d3.select("#venn svg") .append("circle") .attr("stroke", "black") .attr("fill", "aliceblue") .attr("r", 50) .attr("cx", 52) .attr("cy", 52) .on("mouseover", function(){return tooltip.style("visibility", "visible");}) .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");}) .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

//----------tool tip code 2 ends  -----------------