Bing map infobox on hover over a li not displaying - bing-maps

Question

I am working with integration of bing maps into the application. When the search button is clicked after entering the zip code information, the div below will display a list of available stores and a map with pushpin on that. Showing an infobox is working when I hover over the pushpin. But my requirement is that, I have to show the particular infobox to the user, when the user hovers over the list in the left of the maps.
For example here, when I hover over the first result on the left, the corresponding infobox should show in the map. I am unable to figure out why it not working. Appreciate your help in advance. Thank you. Please find below what I have tried so far.
for (var i = 0; i < data.length; i++) {
if (storeLoc && (data[i].metadata.LocationTypeSort == "ja")) {
console.log(counter);
console.log(data);
innerTablecontent += "<tr><td><h4 class='h4-mapDetails-storeName'>" + '<div style="display: inline-block; vertical-align: middle"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><text x="50%" y="17" text-anchor="middle" fill="white" font-size="14" font-weight="bold">' + (+counter) + '</text></svg></div>' +
" " + "<b><span style='margin-top:-20px;display:block;margin-left:45px;'>" + data[i].metadata.LocationName + "</span></b>" + "</h4><p class='p-mapDetails'>" + data[i].metadata.AddressLine + "," + data[i].metadata.Locality + "," + data[i].metadata.AdminDistrict + " " + data[i].metadata.PostalCode + "</p>"
+ "<p class='p-mapDetails'>" + data[i].metadata.Phone + "<span><span class='index hidden'>" + i + "</span> | " + '<a style=" font-family:Helvetica Neue LT Pro Roman,sans-serif;color:#00A7CE" href="">View details</a>' + "</span></p>"+ "<span class='miles-mapDetails'>" +(data[i].metadata.__Distance* 0.6214).toFixed(2)+"mi</span></td></tr>"
locations.push(data[i].getLocation());
var pin1 = createCirclePushpin(data[i].getLocation(), 12.5, 'rgb(0, 0, 0)', 'black', 1, counter);
pin1.metadata = {
//title: counter + "." + " " + data[i].metadata.LocationName,
title: " ",
description: '<div style="display: inline-block; vertical-align: middle; margin-right:10px;"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><circle cx="12.5" cy="12.5" r="12.5"/><text font-weight="bold" x="50%" y="17" text-anchor="middle" fill="white" font-size="14">' + (+counter) + '</text></svg></div>' + "<span class='h4-mapDetails-storeName'>" + data[i].metadata.LocationName + "</span><p style='margin-bottom:-3px;font-family:Helvetica Neue LT Pro Roman,Helvetica,sans-serif;font-style:normal !important;color:#000;font-size:14px;'>" + data[i].metadata.AddressLine + ", " + data[i].metadata.Locality + "," + data[i].metadata.AdminDistrict + " " +
data[i].metadata.PostalCode + "<br>" + data[i].metadata.Phone + "</p>" + "<a>" + '<a style="font-size:14px;font-family:Helvetica Neue LT Pro Roman,Helvetica,sans-serif;color:#00A7CE" href="">View details</a>' + "</a>"
};
Microsoft.Maps.Events.addHandler(pin1, 'mouseover', pushpinClicked);
map.entities.push(pin1);
counter++;
}
Function to call when the list is hovered:
$("#mapDetails").on("mouseover", "table td", function() {
sideTabHoverEvent(hoverdata[$(this)[0].getElementsByClassName('index')[0].innerText]);
})
function sideTabHoverEvent(e) {
if (e) {
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: e.getLocation(),
//title: e.metadata.title,
description: e.metadata.description,
visible: true
});
}
}

Answer 1

In you sideTabHoverEnt function you are assuming e is the pushpin the user interacted with, but that's not what you are passing in. You are passing in a string (index as a string). Try doing the following:
function sideTabHoverEvent(e) {
if (e) {
//Turn the index string value into a number.
var idx = parseInt(e);
var shape = map.entities.get(idx);
//Set the infobox options with the metadata of the pushpin.
infobox.setOptions({
location: shape.getLocation(),
//title: shape.metadata.title,
description: shape.metadata.description,
visible: true
});
}
}