How to close an opened InfoBubble within event listener?

Question

In my page, I have some markers and I want to show a title on each marker on hover. This was simple in Google Maps as we were using title parameter for google.maps.Marker() object. I couldn't find anything like in Here Maps and I decided to make a simple, similar one.

Now I have a nokia.maps.map.Container() which has one infobuble, one marker and two events: mouseenter and mouseleave. I can open infobubble in mouseenter event, but I can't close it in mouseleave event. I'm trying to use closeBubble(), but I'm unsuccessful.

Here is the fiddle of my work so far: http://jsfiddle.net/ffAKX/

How can I close that opened infobubble when mouse leaves marker object? Or is there any simple way to do this like title parameter of google.maps.Marker() object?

Answer 1

The documentation on the InfoBubbles component can be found here. If you look at the closeBubble() method, you can see that it takes a bubble handle as a parameter. This needs to be remembered from the previous openBubble()

var infoBubbles = new nokia.maps.map.component.InfoBubbles(),
    bubble;

map.components.add(infoBubbles);
container = new nokia.maps.map.Container();

container.addListener("mouseenter" ,  function(evt) {
    bubble =infoBubbles.openBubble(evt.target.html, evt.target.coordinate);   
}, false);

container.addListener("mouseleave" ,  function(evt) {
    infoBubbles.closeBubble(bubble); // I need to close infoBubble here
});

The result is very much like a tooltip, an actual tooltip component can be found on the HERE Maps community pages