In this next blog post , we will solve one of the issues we had with displaying information about specific series items back to the user. The way we did it was by using a rather hacky approach which was just to show that it’s indeed doable. Now , let’s go ahead and find out what the intended way was – by using tooltips !

Preparing for tooltips

The tooltips that are being displayed are styled through jQuery’s templating engine. This means that we will need to prepare a template object. To see the mark-up of a template , check the following code sample out:

   1: <script id="officeTemp" type="text/x-jquery-tmpl">
   1:  
   2:     <div>
   3:     <table>
   4:         <tr>
   5:             <td>
   6:                 ${item.Country}
   7:             </td>
   8:         </tr>
   9:         <tr>
  10:             <td>
  11:                 ${item.Name}
  12:             </td>
  13:         </tr>
  14:         <tr>
  15:             <td>
  16:                Latitude: ${item.Latitude}
  17:             </td>
  18:         </tr>
  19:         <tr>
  20:             <td>
  21:                Longitude: ${item.Longitude}
  22:             </td>
  23:         </tr>
  24:     </table>
</script>

The template can consist of any valid HTML mark-up , the choice in our case being a table so that we can get a distinct order in the tooltip information without applying additional styles. The code at lines 6 , 11 , 16 and 21 tells the templating engine to use the current item ( think of it as a collection where the template will be applied to every item ) and fill in rows with properties of that item.

We know to set up our template in this manner since we are familiar with the structure of our series objects – here’s one.

 1: { "Name": "Infragistics Bulgaria Development Lab", "Country": "Bulgaria", "Latitude": 42.641262, "Longitude": 23.334461 }

Now with the template done , we have to enable tooltips on the series we want them to describe. This is done with two lines of code ( 21 and 22 ) :

 1: $.ig.loader(function () {

 2:     $("#map").igMap({

 3:         width: "100%",

 4:         crosshairVisibility: "visible",

 5:         verticalZoomable: true,

 6:         horizontalZoomable: true,

 7:         overviewPlusDetailPaneVisibility: "visible",

 8:         panModifier: "control",

 9:         backgroundContent: {

 10:             type: "openStreet"

 11:         },

 12:         series: [{

 13:             type: "geographicSymbol",

 14:             name: "capitals",

 15:             dataSource: europeCapitals,

 16:             latitudeMemberPath: "Lat",

 17:             longitudeMemberPath: "Lon",

 18:             markerType: "automatic",

 19:             markerBrush: "#FF0000",

 20:             markerOutline: "#00FF00",

 21:             showTooltip: true,

 22:             tooltipTemplate: "officeTemp"

 23:         ],

 24:         windowResponse: "immediate"

 25:     });

 26: });

This will tell the map to use the specific template for this series , which of course means you could have a different template used for another one of your series. You would just need to define a separate new template and then make your other series point to it.

There are a few other things you can use and these are…

Events

The Infragistics jQuery Map tooltips come with a set of events , namely two pairs. There’s two events for when a tooltip is displayed and two events for when a tooltip is getting hidden.

• tooltipShowing – fired just when a tooltip is about to be displayed. This event is cancellable.
• tooltipShown – fired after a tooltip has been shown. This event is not cancellable.
• tooltipHiding – fired just when a tooltip is about to be hidden. This event is cancellable.
• tooltipHidden – fired after a tooltip has been hidden. This event is not cancellable.

I will be using the tooltipShowing and tooltipHiding events to show you how to implement an event logger and distinguish which series did the event come from.

First of all , bear in mind that the Showing event is going to be called every time the tooltip is to be displayed – that means even while moving your mouse within the same series item. This means that you will get a long queue of the Showing events where in reality you only need to use one. I’ll show you my way of solving this issue.

 1: $.ig.loader(function () {

 2:     var tooltip = false;

 3:     $("#map").igMap({

 4:         width: "100%",

 5:         crosshairVisibility: "visible",

 6:         verticalZoomable: true,

 7:         horizontalZoomable: true,

 8:         overviewPlusDetailPaneVisibility: "visible",

 9:         panModifier: "control",

 10:         backgroundContent: {

 11:             type: "openStreet"

 12:         },

 13:         series: [{

 14:             type: "geographicSymbol",

 15:             name: "capitals",

 16:             dataSource: europeCapitals,

 17:             latitudeMemberPath: "Lat",

 18:             longitudeMemberPath: "Lon",

 19:             markerType: "automatic",

 20:             markerBrush: "#FF0000",

 21:             markerOutline: "#00FF00",

 22:             showTooltip: true,

 23:             tooltipTemplate: "capTemp"

 24:         },

 25:         {

 26:             type: "geographicSymbol",

 27:             name: "igOffices",

 28:             dataSource: igOffices,

 29:             latitudeMemberPath: "Latitude",

 30:             longitudeMemberPath: "Longitude",

 31:             markerType: "automatic",

 32:             markerBrush: "#000000",

 33:             markerOutline: "#00FFFF",

 34:             showTooltip: true,

 35:             tooltipTemplate: "officeTemp"

 36:         }],

 37:         windowResponse: "immediate",

 38:         seriesMouseLeftButtonUp: function (evt, ui) {

 39:             $("#info").append("" + ui.item.Name + " clicked !
");

 40:         },

 41:         tooltipShowing: function (evt, ui) {

 42:             if (tooltip) evt.cancel = true;

 43:             else {

 44:                 $("#info").append("Showing " + ui.item.Name + " tooltip from the " + ui.series.name + " series !
");

 45:                 tooltip = true;

 46:             }

 47:         },

 48:         tooltipHiding: function (evt, ui) {

 49:             $("#info").append("Hiding " + ui.item.Name + " tooltip from the " + ui.series.name + " series !
");

 50:             tooltip = false;

 51:         }

 52:     });

 53: });

Starting off , at line 2 I have defined my own bool value that will keep track of whether a tooltip is currently displayed or not. This is used from lines 41 to 51.

Line 41 is where we define the event handler for the tooltipShowing event – the one we know we’ll have trouble with. What we’re doing there is we’re checking the boolean variable – if it’s true , then a tooltip has already been shown and we don’t want to call the event again so we cancel it ( this is why we used the cancellable events for this example ). If , however , a tooltip is not currently being displayed – we go ahead and let the event be called , then set the boolean to true in order to prevent the event from being called next time.

Line 48 – this is where we handle hiding of tooltips. This is not a place where events will be “stacked” , so we don’t need to check the boolean. We , however , need to set it to false because every time this event is called , we’re hiding the currently displayed tooltip and making room for a new one to pop up.

Download the enhanced example ( it’s the same as with the first post but now has tooltips added to it ).