javascript - D3: Prevent tooltip from going out of the box

Question

I have some charts, like line and area charts but the tooltip is going out of the box container. Click here to check issue. Especially when it's in a mobile view. In this particular case, I want the tooltip to render to the left continuously when approaching the right border.

Below is the code. If any more additional info is needed, I'm pleased to share more. Thanks in advance!

    const body = document.body;
    const docElem = document.documentElement;
    const scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    const scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
    const clientTop = docElem.clientTop || body.clientTop || 0;
    const clientLeft = docElem.clientLeft || body.clientLeft || 0;
    //var y = box.top +  scrollTop - clientTop;
    let y = d3.event.clientY + scrollTop - clientTop;
    let x = d3.event.clientX + scrollLeft - clientLeft;
    const tooltipWidth = tooltip.width();
    const tooltipHeight = tooltip.height();
    x = (x > tooltipWidth / 2 + 16) ? x - tooltipWidth / 2 : 16;
    y = (y < tooltipHeight + 30 + 3.5) ? 5 : y - tooltipHeight - 25 - 3.5;
    tooltip
      .css('left', Math.max(0, x) + 'px')
      .css('top', y + 'px');

Additional code for understanding where some values come from:

// show tooltip
  const tooltip = $('div.widget-tooltip');
  let tooltipText = '';
  ...
  tooltip.html(tooltipText);
  tooltip.show().css('opacity', 1);

question from:https://stackoverflow.com/questions/65598796/d3-prevent-tooltip-from-going-out-of-the-box

Answer 1

Waitting for answers