CODEWITHSUNDEEP
javascriptd3.js
FrontEnd Expert
FrontEnd Expert

Reputation: 5813

Tooltip is going out of the box in d3 chart

My tooltip is going out of the box in d3 chart.

Can someone guide me what I am doing wrong ?

css - 

div.tooltip {
        position: absolute;
        width: 240px;
        height: 140px;
        font: 14px sans-serif;
        background: white;
        border: 0px;
        box-shadow: 0 0 5px #999999;
        border-radius: 2px;
        pointer-events: none;
        text-align: left;
        padding: 5px 0 5px 15px;
        opacity: 100;
    }

div for tooltip -

// Define the div for the tooltip
var div = d3
    .select("body")
    .append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

I am thing there's some issue with mousemove, mouseover please guide me.

code sandbox here - https://codesandbox.io/s/wizardly-butterfly-2nnbw

enter image description here

Upvotes: 1

Views: 727

Answers (1)

Keyur Gajjar
Keyur Gajjar

Reputation: 360

On TimelineChart.js line number 513. https://codesandbox.io/s/amazing-waterfall-gz4o8

div
.html(
`<span>The following changes are made to running configuration :</span><br/><br/>`
 <span>Lines Added : ${d.magnitude} % </span><br/>
<span>Lines Removed : ${d.magnitude} % </span><br/><br/>
<span>${parseDate(d.startTime)}</span>`
.style("left", d3.event.pageX + "px")
.style("top", d3.event.pageY - 28 + "px");

Replace with this

div
.html(
`<span>The following changes are made to running configuration :</span><br/><br/>
<span>Lines Added : ${d.magnitude} % </span><br/>
<span>Lines Removed : ${d.magnitude} % </span><br/><br/>
<span>${parseDate(d.startTime)}</span>`
).style("top", d3.event.pageY - 28 + "px");
var out_width = this.getBoundingClientRect().width - 130;
if(d3.event.pageX > out_width){
div.style("left", d3.event.pageX + "px")
div.style("transform", "translateX(-100%)");
}
else{
div.style("left", d3.event.pageX + "px");
div.style("transform", "translateX(0)");
}

Upvotes: 2

Related Questions