Question

I’ve got on my map (Bing Maps AJAX v7) multiple infoboxes with custom HTML content. Since some of them are close, the infoboxes overlapp sometimes.

Also, I would expect that, when mouse is over one of them, it comes to the foreground and (optionnaly) come back to the background when mouse leaves.

So, by using zIndex property, I added these lines :

Microsoft.Maps.Events.addHandler(infobox, 'mouseenter', function(e) {
  infobox.setOptions({zIndex : 300});
 });
Microsoft.Maps.Events.addHandler(infobox, 'mouseleave', function(e) {
  infobox.setOptions({zIndex : 0});
});

However, things are going weird with these lines :

• when mouse enters, the infobox makes a jump of location untill next map redraw.
• the mouseleave callback is never called.

I reproduced this on a jsFiddle : http://jsfiddle.net/wXFhy/7

Has anyone any ideas on why or how ? Thank you !

Answer 1

I didn’t find the reason of this behavior. However, I changed the technique to obtain what I wanted by using css only (with z-index and :hover) rather than Javascript and that works well. See http://jsfiddle.net/wXFhy/8/.

I added these css properties :

.FriendPinMap {
  float: left;
  position: absolute;
  z-index:0;
}

.FriendPinMap:hover {
  z-index:3;
}

and removed the javascript doing (badly) the equivalent.