How to keep popup box entirely visible on full screen map?

[ezachte]

I put lots of content on popup box, see draft at (https://stats.wikimedia.org/archive/squid_reports/2016-06/draft7/datamaps-views.html) How I can I keep the box inside the window? e.g. Try hover over New Zealand. Thanks

[rainerbrunotte]

In my browser it stays inside the window (Safari 10, Mac OS X)

[ezachte]

Since I filed this issue I added hard coded exceptions where certain country codes get adjusted window coordinates.

shift_left = positionLeftPopupCountries (geo.properties.iso) ; shift_top = positionTopPopupCountries (geo.properties.iso) ;

<div class='hoverinfo' align=left style='white-space:nowrap; left:" + shift_left + "px; top:" + shift_top + "px ; etc

[...]

// manipulate position of hover box so that it stays within border of map // I couldn't determine mouse position or latitude // so hover box shifts on basis of country code (is a bit crude on really tiny maps)

shift_left = -100 ; if (isocode.match (/^(AFG|AUS|BGD|BTN|CHN|FJI|GUM|IDN|IND|JPN|KHM|KOR|LAO|LKA|MMR|MNG|MYS|NPL|NZL|PAK|PHL|PNG|RUS|SLB|TWN|VUT)$/)) { shift_left = -350 ; } else { if (isocode.match (/^(CAN|USA|WSM)$/)) { shift_left = 0 ; } // only countries close to west border of map: Canada, USA, Samoa }

[rainerbrunotte]

How did you get those pop up boxes to display? Mine do not show up for some reason, even though i set them to "true":

geographyConfig: {
popupOnHover: true, //disable the popup while hovering
highlightOnHover: true,
},

bubblesConfig: {
popupOnHover: true, // True to show the popup while hovering
popupTemplate: function(geography, data) {
return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>';
}
}

[ezachte]

basic code example is at https://github.com/markmarkoh/datamaps#bubbles