none
Bing Maps AJAX v7 pushpin tooltip RRS feed

  • Question

  • Hi everybody.

    I'm trying to add tooltips to pushpins created using the Bing Maps AJAX v7 API. I found a working code in http://rbrundritt.wordpress.com/2011/11/21/pushpin-tooltips-in-bing-maps-v7/ but this approach works only if the pushpin is constructed inside the visible viewport.

    $('.pin1').children().attr('title','This is pin 1.');  

    If the pushpin is constructed outside of the viewport, once you zoom out and the pushpin become visible, the DOM element doesn't have the 'title' property.

    Also, I tried with:

    pin.cm1001_er_etr.dom.setAttribute('title', 'Pushpin Title');

    But the pushpin object sometimes have different names (like cm1002_er_etr), or sometimes doesn't have this at all.

    Exist some way to add the 'title' property directly to the pushpin js object?


    Bernardo Salazar


    Tuesday, August 5, 2014 4:07 PM

Answers

  • I suspect that the when the pushpin is being recreated when coming back into view. This didn't happen back when that blog post was original written 3 years ago. There are a couple of different ways to create a tooltip using Bing Maps. One method is to use the Bing Theme module and set the title and description of the infobox for a pushpin. This automatically shows the title of the infobox when you hover over the pushpin. You can find more information on this here:

    http://www.bingmapsportal.com/ISDK/AjaxV7#BingThemeModule5

    http://msdn.microsoft.com/en-us/library/hh921953.aspx

    Another approach is to use the mouse events on the pushpin object and create your own tooltip functionality when the user hovers over the pushpin. You can use the infobox control or simply float a div above the map using an absolute position and the mouse location. You can find documentation on the pushpin class here: http://msdn.microsoft.com/en-us/library/gg427615.aspx


    http://rbrundritt.wordpress.com

    Tuesday, August 5, 2014 4:40 PM
  • I opted for apply the attribute 'title' on demand. As soon the user hover over the pushpin, the attribute is added:

    Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseOver);

    ...

    function pinMouseOver(e) {
       var DataName = e.target.getTypeName();
       $('.' + DataName).children().attr('title', 'pushpin tooltip text' };
    };


    Bernardo Salazar

    Tuesday, August 5, 2014 5:02 PM

All replies

  • I suspect that the when the pushpin is being recreated when coming back into view. This didn't happen back when that blog post was original written 3 years ago. There are a couple of different ways to create a tooltip using Bing Maps. One method is to use the Bing Theme module and set the title and description of the infobox for a pushpin. This automatically shows the title of the infobox when you hover over the pushpin. You can find more information on this here:

    http://www.bingmapsportal.com/ISDK/AjaxV7#BingThemeModule5

    http://msdn.microsoft.com/en-us/library/hh921953.aspx

    Another approach is to use the mouse events on the pushpin object and create your own tooltip functionality when the user hovers over the pushpin. You can use the infobox control or simply float a div above the map using an absolute position and the mouse location. You can find documentation on the pushpin class here: http://msdn.microsoft.com/en-us/library/gg427615.aspx


    http://rbrundritt.wordpress.com

    Tuesday, August 5, 2014 4:40 PM
  • I opted for apply the attribute 'title' on demand. As soon the user hover over the pushpin, the attribute is added:

    Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseOver);

    ...

    function pinMouseOver(e) {
       var DataName = e.target.getTypeName();
       $('.' + DataName).children().attr('title', 'pushpin tooltip text' };
    };


    Bernardo Salazar

    Tuesday, August 5, 2014 5:02 PM