In recent months I’ve had a couple of customers ask how to add a simple tooltip to a pushpin in Bing Maps. It sounds like a simple enough task but there is a bit of a trick to get it to work in a supported way. Looking at the Pushpin class and Pushpin options in Bing Maps there is no option for a tooltip so we have to take a look at what we do have available to us. In the pushpin options we have a property called typeName. This property allows us to set a class name to a pushpin. Now this gives us the ability to assign a unique identifier to the pushpin that is rendered. By creating a unique class name for each pushpin you can then set a tooltip value to the pushpin by retrieving the pushpin DOM object by class name. Now retrieving a DOM object by class name is a bit tricky as not all browsers have a nice simple method for this. To make things easier, jQuery can be used as it is has cross browser support for this. Once we retrieve a DOM object by class name the tooltip can be set by setting the “title” attribute. Putting this all together we end up with the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> <script type="text/javascript"> var map = null; function GetMap() { // Initialize the map map = new Microsoft.Maps.Map(document.getElementById("myMap"), {credentials:"Your Bing Maps Key"}); // Retrieve the location of the map center var center = map.getCenter(); // Add a pin to the center of the map var pin = new Microsoft.Maps.Pushpin(center, {typeName: "pin1"}); map.entities.push(pin); //Get the pushpin DOM object by class name and set the Title attribute. $('.pin1').children().attr('title','This is pin 1.'); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:400px; height:400px;"></div> </body> </html>
When you run the code you will end up with a map that looks like the following. When you hover over the pushpin you will see the tooltip.
Ricky's Microsoft Maps Blog 
How this can be done in Windows store app ?
In Windows 8 you will likely want to avoid tooltips as they won’t work if the user is using a touch device. You can use the infobox control if you wanted and attach a touch event to it.
Dude ~ you rock. I had the basic idea, but your solution did the trick. THANKS for helping out.
(P.s. turned out to be a single-vs-double quote in javascript… . Your code spotlighted that. :)
Thanks for this post. It lead me in the right direction. But beside to set a unique class for any pin you can also set the id of a pin.
The following worked for me:
var pin = new Microsoft.Maps.Pushpin(center, { id: ‘pin1’ });
…
$(‘#pin1’).children().attr(‘title’,’This is pin 1.’);
Maybe this is more clean and efficient.
How about doing this when creating multiple pins in a loop so you cannot set a hardcoded typeName or id
Append the index to the typeName value. This will give each pin a unique typeName.
Hi Ricky,
Thank you, quite belatedly, for this! This works fantastically in version 7. At this time, version 8 is still in preview, but any ideas on how we will be able to efficiently do this for many pushpins in a single layer using Bing Maps V8?
Thanks,
Ken
V7 rendered data by creating DOM elements on the page. The solution provided in this blog post is a bit of a hack as it directly modifies the DOM element. In V8 all data is rendered directly on an HTML5 canvas as this provides an order of magnitude improvement in performance and in the amount of data we can render on the map. To create a tooltip in V8 you will need to use the mouseover/mouseout events and display a custom infobox.
The infobox as tooltip approach works great! Only took a few minutes to implement. Thank you so much!
Ken