micwill007
commented
6 years ago I've come up with a half-baked solution for now.
Determine the height of div.datamaps-hoverover, and subtract that from .style('top', ( (position[1] + 30)) + "px"). Mine is a set height of around 296px, so ~ 330px works - still tracks the bubble nodes fairly well and a little extra px for padding:
.style('top', ( (position[1] - 330)) + "px")
You could probably use jQuery to grab the actual height of the individual node hoverpopup being hovered and use that if you had varying heights.
On that note i'm going to close this ticket 👌
Popup currently tracks below bubbles and does it well - however adjusting the relevant code to move it above the bubbles is leading to unexpected results (Popup rendering further and further away for different bubble nodes with higher x/y values). Tried using bottom instead of top, but it doesn't quite work as expected.
Open to ideas.
Datamaps.js:
Datamap.prototype.updatePopup = function (element, d, options) { var self = this; element.on('mousemove', null); element.on('mousemove', function() { var position = d3.mouse(self.options.element); d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover') .style('top', ( (position[1] + 30)) + "px") .html(function() { var data = JSON.parse(element.attr('data-info')); try { return options.popupTemplate(d, data); } catch (e) { return ""; } }) .style('left', ( position[0]) + "px"); }); d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block'); };I'll update this issue if I can figure this out.