HoverOver not really bug but an issue

[PhilipLin]

Depending on how large the pop box is, we have a issue in which if the box is big/long enough, the hoverover will not display making it a display:none, because the mouse icon is over the box. As you move across the map this results in a flickering action.

Hover over cant really be fixed, but placement of the box could be better. The placement of the pop up appears to be a fixed position to the left of the mouse, so if the text is long enough it result in this problem.

[markmarkoh]

That makes sense. I attempted to address this originally by giving an offset from the cursor to the hoverover box, but I didn't anticipate a large box.

Can you screenshot/link to an example of how large the hoverover box is?

[D1plo1d]

I was having the same issue. Here's a screenshot from my test environment:

My solution was to patch the updatePopup function with a larger offset and to add cached previous html check to prevent rapid DOM re-creation (not sure if it was actually necessary but it will help performance regardless).

  Datamap.prototype.updatePopup = function (element, d, options) {
    var self = this;
    var hoveroverElement = d3
      .select(self.svg[0][0].parentNode)
      .select('.datamaps-hoverover');
    element.on('mousemove', null);
    element.on('mousemove', function() {
      var position = d3.mouse(self.options.element);
      var data = JSON.parse(element.attr('data-info'));
      self.previouslyRenderedPopup = true;
      var html = options.popupTemplate(d, data);
      if (!(html === self.previousPopupHtml)) {
        hoveroverElement.html(function() {return html});
      };
      hoveroverElement
        .style('top', ( (position[1] + 100)) + "px")
        .style('left', ( position[0]) + "px")
        .style('display', 'block');
      self.previousPopupHtml = html
    });
  };

If you'd be interested in a Pull Request I can put one together.