将提示添加到地图区域并触发鼠标悬停

Question

大家好！ 我在与地图/区域/工具提示打架。 我有这张地图，其中有多个矩形区域，每个区域都有自己的标题，并且该数据表位于包含区域“列表”的地图旁边。当我单击一行时，将触发该区域以显示工具提示。

HTML

<map name="image-map">
    ...
    <area id="station_2" target="" alt="2" data-toggle="tooltip" title="Area 2" href="../somePage?id=2" coords="1405,297,1417,323" shape="rect">
    ...
</map>

JS

stationTable.on('click', 'tr', function () {
    var data = stationTable.row(this).data();
    area_name = "#station_" + data.stationID;
    $(area_name).hover(
        function () {
            $(area_name)[0].dataset.originalTitle = "WHY AM I HERE?";
        });
    $(area_name).mouseover();
});

$('[data-toggle="tooltip"]').tooltip();

它可以工作，但是由于某些原因，工具提示显示在地图的左下方。

请注意，悬停区域是右上角的一个区域。

如果我不使用$('[data-toggle="tooltip"]').tooltip();，标题将显示在该区域的顶部。

有什么想法吗？

更新 在Chrome中进行调试时，我发现<map>区域的大小基本上为0x0，位于图像的左下角。 因此，所有区域也都位于该角。 因此，工具提示在那里打开。

看起来该区域始终为0x0，也未使用BootStrap工具提示，但这不会影响本机鼠标悬停工具提示。

仍然期待获得您可能想到的任何解决方案。