0

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

Javascript Coder
  • 5,691
  • 8
  • 52
  • 98
  • May be this is what you need. https://stackoverflow.com/questions/16256454/d3-js-position-tooltips-using-element-position-not-mouse-position – Sukrut Bam Oct 10 '19 at 09:55

1 Answers1

1

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)");
}
Keyur Gajjar
  • 350
  • 2
  • 7
  • Thanks for the response, why you have given this `var out_width = this.getBoundingClientRect().width - 130;` specially `130` in this line, – Javascript Coder Oct 14 '19 at 10:56
  • In my code I am calculating the width for chart using `(window.innerWidth * 66)/100` this, and then redering my chart, what should i have in place of`130` – Javascript Coder Oct 14 '19 at 10:57
  • It's normal and basic code I calculated chart SVG width and 130 for a simple hook. Please use Window.outerWidth it's better than window.innerWIdth because it's calculated widht with padding and other things. – Keyur Gajjar Oct 14 '19 at 13:09