[D3] Add hovercard

The way to add hovercard is

• Append a div with class 'hovercard'
• in the tick function, positioning the hovercard with 'd3.event.pageX and pageY'

.hovercard {
  position: absolute;
  max-width: 400px;
  height: auto;
  padding: 5px;
  background-color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  font: 12px sans-serif;
}

            const hovercard = d3.select('body')
                .append('div')
                .attr('class', 'hovercard')
                .style('opacity', 0)
                .style('width', 400);

            function ticked() {

                // adjust nodes containers position
                svgNodes
                    .attr('transform', d =>`translate(${d.x},${d.y})`)
                    .call(d3.drag()
                        .on('start', dragstarted)
                        .on('drag', dragged)
                        .on('end', dragended));

                // Curve paths
                path
                    .attr('d', (d) => {
                        const curve = d.battle_number * .5;
                        const dx = d.target.x - d.source.x;
                        const dy = d.target.y - d.source.y;
                        const dr = Math.sqrt(dx * dx * curve + dy * dy * curve);
                        return `M${d.source.x},${d.source.y}A${dr},${dr} 0 0,1 ${d.target.x},${d.target.y}`;
                    });

                path.on('mouseover', d => {

                    hovercard
                        .transition()
                        .duration(300)
                        .delay(20)
                        .style('opacity', 1);

                    const tip =
                        '<h2>' + d.name + '</h2>' +
                        '<h4>' + d.source.name + ' attacked ' + d.target.name + ' and the outcome was a ' + d.attacker_outcome + '</h4>' +
                        '<h3>Details</h3>' +
                        '<strong> Attacker King: </strong>'+d.attacker_king + '<br/>'+
                        '<strong> Battle Type: </strong>'+d.battle_type + '<br/>'+
                        '<strong> Major Death?: </strong>'+d.major_death + '<br/>'+
                        '<strong> Major Capture?: </strong>'+d.major_capture + '<br/>'+
                        '<strong> Attacker Size: </strong>'+d.value + '<br/>'+
                        '<strong> Defender Size: </strong>'+d.defender_size + '<br/>'+
                        '<strong> Region / Location: </strong>'+d.region+ ' / ' + d.location + '<br/>'+
                        '<strong> Attacking Commander: </strong>'+d.attacker_commander + '<br/>'+
                        '<strong> Defending Commander: </strong>'+d.defender_commander;

                    hovercard
                        .html(tip)
                        .style('left', d3.event.pageX + 'px')
                        .style('top', d3.event.pageY + 'px');
                });

                path.on('mouseout', d => {
                    hovercard
                        .transition()
                        .duration(500)
                        .style('opacity', 0);
                });

            }
        });