I want my infoBubble to open on mouseenter and close on mouseleave, and so far it works perfectly apart from the infoBubble's default position is on the marker and as you move the mouse on the marker, it closes and opens constantly.

an example of what I mean when it drops on the marker can be seen here:

Ideally i'd like the infoBubble to show below the marker, is there anyway I can set the infoBubble's position?

(Tried moving the infoBubble up with setPosition method but markers stay the same size as you move out so the infobubble goes back on top.

var infoBubble = new H.ui.InfoBubble({
            lat: coordinates[1],
            lng: coordinates[0]
        }, {
            content: infoBubbleContent
        });

        marker.addEventListener('pointerenter', function() {
            ui.addBubble(infoBubble);
            infoBubble.open();
        }, false);

        marker.addEventListener('pointerleave', function() {
            infoBubble.close();
        }, false);

Thank you for your help in advance

I want my infoBubble to open on mouseenter and close on mouseleave, and so far it works perfectly apart from the infoBubble's default position is on the marker and as you move the mouse on the marker, it closes and opens constantly.

an example of what I mean when it drops on the marker can be seen here: http://developer.here./api-explorer#maps-js/open-infobubble

Ideally i'd like the infoBubble to show below the marker, is there anyway I can set the infoBubble's position?

(Tried moving the infoBubble up with setPosition method but markers stay the same size as you move out so the infobubble goes back on top.

var infoBubble = new H.ui.InfoBubble({
            lat: coordinates[1],
            lng: coordinates[0]
        }, {
            content: infoBubbleContent
        });

        marker.addEventListener('pointerenter', function() {
            ui.addBubble(infoBubble);
            infoBubble.open();
        }, false);

        marker.addEventListener('pointerleave', function() {
            infoBubble.close();
        }, false);

Thank you for your help in advance

• javascript
• maps
• here-api

3 Answers 3

infoBubble has an addClass method, so how I've resolved this is to add a class via this method and move the infobubble up by the height of the marker.

Rather than modifying the behaviour of the Infobubble ponent, it would make sense to create a custom Tooltip ponent instead. This can observe the objects on the map and display a styled injected <DIV> which of course would be under your control.

A tooltip can be defined as shown:

(function (ctx) {
  // ensure CSS is injected
  var tooltipStyleNode = ctx.createElement('style'),
    css = '#nm_tooltip{' +
      ' color:white;' +
      ' background:black;' +
      ' border: 1px solid grey;' +
      ' padding-left: 1em; ' +
      ' padding-right: 1em; ' +
      ' display: none;  ' +
      ' min-width: 120px;  ' +
      '}';

  tooltipStyleNode.type = 'text/css';
  if (tooltipStyleNode.styleSheet) { // IE
    tooltipStyleNode.styleSheet.cssText = css;
  } else {
    tooltipStyleNode.appendChild(ctx.createTextNode(css));
  }
  if (ctx.body) {
    ctx.body.appendChild(tooltipStyleNode);
  } else if (ctx.addEventListener) {
    ctx.addEventListener('DOMContentLoaded',  function () {
      ctx.body.appendChild(tooltipStyleNode);
    }, false);
  } else {
    ctx.attachEvent('DOMContentLoaded',  function () {
      ctx.body.appendChild(tooltipStyleNode);
    });
  }
})(document);


Object.defineProperty(Tooltip.prototype, 'visible', {
  get: function() {
    return this._visible;
  },
  set: function(visible) {
    this._visible = visible;
    this.tooltip.style.display = visible ? 'block' : 'none';
  }
});


function Tooltip(map) {
  var that = this;
  that.map = map;
  that.tooltip  = document.createElement('div');
  that.tooltip.id = 'nm_tooltip';
  that.tooltip.style.position = 'absolute';
  obj = null,
  showTooltip = function () {
    var point = that.map.geoToScreen(obj.getPosition()),
      left = point.x - (that.tooltip.offsetWidth / 2),
      top = point.y + 1; // Slight offset to avoid flicker.
    that.tooltip.style.left = left + 'px';
    that.tooltip.style.top = top + 'px';
    that.visible = true;
    that.tooltip.innerHTML =  obj.title;
  };


  map.getElement().appendChild(that.tooltip);
  map.addEventListener('pointermove', function (evt) {
    obj = that.map.getObjectAt(evt.currentPointer.viewportX,
        evt.currentPointer.viewportY);
    if(obj && obj.title){
      showTooltip();
    } else {
      that.visible = false;
    }
  });

  map.addEventListener('tap', function (evt){
    that.tooltip.visible  = false;
  });
  map.addEventListener('drag', function (evt){
    if (that.visible) {
      showTooltip();
    }
  });
};

The ponent is initialized by passing in the current map:

tooltip = new Tooltip(map);

And displays on any object with a title property - either a string or HTML markup - of course this could be updated to use the getData() method if so desired:

   // Simple Marker with tooltip
  var brandenburgerTorMarker = new H.map.Marker(
    {lat:52.516237, lng: 13.35}),
    fernsehturmMarker = new H.map.Marker(
      {lat:52.520816, lng:13.409417});

  brandenburgerTorMarker.title = 'Brandenburger Tor';

  // Marker with HTML Tooltip
  fernsehturmMarker.title ='<div>' +
    '<h2>Tooltip with HTML content<\/h2>' +
    '<img width=\'120\' height=90 src=' +
    '\'http://upload.wikimedia/wikipedia/mons/' +
    '8/84/Berlin-fernsehturm.JPG\' ' +
    'alt=\'\'/><br/><b>Fernsehturm, Berlin<\/b>' +
    '<\/div>';

  // Add the markers onto the map
  map.addObjects([brandenburgerTorMarker, fernsehturmMarker]);

The hover text appears as below - style by altering the CSS as necessary:

it should help

map.addEventListener('pointermove', function (evt) {
    if(evt.target instanceof H.map.Marker || evt.target instanceof H.map.DomMarker)
        bubble.open();
    else 
        bubble.close();
})