Jquery 道具仅适用于第一个“鼠标悬停”事件

Question

我正在使用引导工具提示在鼠标悬停时显示地图标记的标题。我正在使用'prop'来设置标题。

问题是工具提示标题属性仍然设置为鼠标悬停的第一个标记。

markers[id].addListener('mouseover', function () {
    console.log(markers[id].title);
    /* get marker pixel position */
    var proj = overlay.getProjection();
    var pos = markers[id].getPosition();
    var p = proj.fromLatLngToContainerPixel(pos);
    /* show tooltip */
    $("#tooltip").css("left", p.x + "px").css("top", (p.y + 20) + "px").prop('title', markers[id].title).tooltip('show');
});

请看小提琴 - http://jsfiddle.net/n8x6r5kt/1/

Answer 1

你看，你正在做的事情有一个基本问题，那就是你对 bootstrap .tooltip() 工作原理的理解。 无论如何，下面是你可以做的，删除元素并重新插入它，即

marker.addListener('mouseover', function () {

    var tooltip = $('#tooltip');

    /* get marker pixel position */
    var proj = overlay.getProjection();
    var pos = marker.getPosition();
    var p = proj.fromLatLngToContainerPixel(pos);

    //recreate tooltip
    tooltip.remove();
    tooltip = $(' <div id="tooltip" title="'+ marker.title+'"></div>');
    $('#map').after(tooltip);        

    //add new orientation
    tooltip.css({"left": p.x + "px", "top": (p.y + 10) + "px"});

    tooltip.tooltip();
    tooltip.tooltip('show');

});

见fiddle

您可以尝试的其他选项是

1. 为各个标记创建单独的工具提示容器，这将节省您在鼠标悬停时的额外处理

2. 您可以简单地使用谷歌地图标记infowindow 并为其注入您自己的自定义（看起来像引导工具提示）html，为什么要重新发明轮子？（强烈推荐）