Reputation: 5813
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
Upvotes: 1
Views: 727
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