Tooltip That Doesn't Collide With Edges by mmazanec22

index.html

<!DOCTYPE html>
<html>
<head>

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src='./tooltip.js'></script>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  
</head>
<body>
    <svg>
    </svg>
</body>
</html>

styles.css

html, body {
    height: 100%;
    width: 100%;
}

svg {
    height: 100%;
    width: 100%;
}

tooltip.js

document.addEventListener('DOMContentLoaded', () => {
    makeToolTip();
});


function makeToolTip() {
    const svg = d3.select('svg');
  
    const tooltip = d3.select('body').append('div')
        .attr('class', 'tooltip')
        .style('position', 'absolute')
        .style('z-index', '1');

    tooltip.append('text')
        .text('tooltip')
        .attr('text-anchor', 'middle')
        .style('color', 'pink');

    svg
        .on('mousemove', () => {
            moveToolTip(tooltip);
        })
        .on('mouseout', () => {
            tooltip.style('display', 'none');
        });
}

function moveToolTip(tooltip) {
    const svg = d3.select('svg');
    tooltip.style('display', 'unset');

    const svgDimensions = svg.node().getBoundingClientRect();
    const eventXRelToScroll = d3.event.pageX - window.scrollX;
    const eventYRelToScroll = d3.event.pageY - window.scrollY;

    let tipX = (eventXRelToScroll) + 15;
    let tipY = (eventYRelToScroll) + 10;

    const tooltipDimensions = tooltip.node().getBoundingClientRect();

    tipX = (eventXRelToScroll + tooltipDimensions.width + 10 > svgDimensions.right) ?
        tipX - tooltipDimensions.width - 15 : tipX;

    tipY = (eventYRelToScroll + tooltipDimensions.height + 10 > svgDimensions.bottom) ?
        tipY - tooltipDimensions.height - 10 : tipY;

    tooltip
        .transition()
        .duration(10)
        .style('top', `${tipY}px`)
        .style('left', `${tipX}px`);
}