Hello experts,
I have a map close to your samples
$("#dataMap").igMap({ width: "100%", height: "94%", border: 0, //overviewPlusDetailPaneVisibility: "visible", windowRect: { left: 0, top: 0.2, width: 0.5, height: 0.5 },
backgroundContent: { type: "openStreet" }, series: [{ type: "geographicSymbol", name: "ChangeDB Cities", dataSource: currentResult, //JSON Array defined above latitudeMemberPath: "Latitude", longitudeMemberPath: "Longitude", markerOutline: "#b51c1c", markerBrush: "#b51c1c", showTooltip: true, tooltipTemplate: "
" + "" + "" + "" + "
", }],
});
and the following css for the tooltip
#myCustomTable { font-family: Verdana, Arial, Helvetica, sans-serif; width: 100%; border-collapse: collapse; position: relative; display: inline-block; z-index: 10050;}
#myCustomTable td, #myCustomTable th { font-size: 9px; border: 1px solid #4377e1; padding: 3px 7px 2px 7px; }
#myCustomTable th { font-weight: bold; font-size: 11px; text-align: left; padding-top: 5px; padding-bottom: 4px; background-color: #4377e1; color: #ffffff; }
But what ever I tryed with z-Index etc. the tooltip is always behind the map.
Do you have any idea to solve this?
Regards Manfred
Hello Manfred,
I took the CSS you are using for the table and applied it to one of the samples from Ignite UI. When I look at the tooltips they are all rendering as expected in front of the map:
http://jsfiddle.net/upmxse2u/
Are you able to reproduce the behavior you are seeing in this sample? Does the logic that I provided meet what you are doing in your application?
fore some reasons the tooltip template was not copied very well. here is the korrekt one.
tooltipTemplate: "<table id='myCustomTable'>" + "<tr><th colspan='2'>${item.Office}, ${item.Country}</th></tr>" + "<tr><td>Web:</td><td>${item.Web}</td></tr>" + "<tr><td>Access:</td><td>${item.Access}</td></tr>" + "</table>",