Move the tip position in jvectormap?

Question

I'm working with jvectormap to organize images that were collected across the globe.

When a user hovers over a marker, an image with a description appears above the marker. Instead of this image completely obscuring the map, I'd like the tip affixed to the left of the map, so nothing is obscured.

I've tried changing the position value for .jvectormap-tip. I can't quite figure out how to fix the tip to the left (its default behavior to to hover directly over the marker).

.jvectormap-tip {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
}

I expect the position attribute needs to be changed, along with something else. Not sure what tho..

Answer 1

I would suggest You to create your own custom positioned div and the use the provided functions to show/hide it. Use the on*TipShow hooks (invoked before) to prevent the default tip to be shown.

function showInfo(code) {
  /* Show custom div */
}
function hideInfo() {
  /* Hide custom div */
}

$("#map").vectorMap({
  map: "world_mill",
  // other settings...
  onMarkerTipShow: function(e, tip, code) {
    return false; /* Don't show the standard marker tip */
  },
  onMarkerOver: function(e, code) {
    showInfo(code);
  },
  onMarkerOut: function(e, code) {
    hideInfo();
  },
  onRegionTipShow: function(e, tip, code) {
    return false; /* Don't show the standard region tip */
  },
  onRegionOver: function(e, code) {
    showInfo(code);
  },
  onRegionOut: function(e, code) {
    hideInfo();
  }
});