Добавьте всплывающую подсказку в область карты и наведите курсор мыши - PullRequest
Новая
       41

Добавьте всплывающую подсказку в область карты и наведите курсор мыши

0 голосов
/ 02 мая 2019

Добрый день всем! У меня небольшой бой с картой / областью / всплывающей подсказкой. У меня есть эта карта с несколькими прямоугольными областями, каждая из которых имеет собственное название, и у меня есть эта таблица данных рядом с картой, содержащей «список» областей. Когда я нажимаю на строку, область запускается, чтобы показать подсказку.

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();

Работает, но по какой-то причине всплывающая подсказка отображается в левом нижнем углу карты.

enter image description here

Пожалуйста, обратите внимание, что область на крыше находится справа вверху.

Если я не использую $('[data-toggle="tooltip"]').tooltip();, заголовки отображаются в верхней части области, как и должно быть.

Есть идеи?

UPDATE Отладка в Chrome Я обнаружил, что область <map> в основном имеет размер 0x0 и расположена в левом нижнем углу изображения. Таким образом, все области также расположены в этом углу. Соответственно всплывающие подсказки открываются там.

Похоже, что область всегда 0x0, также не использует всплывающую подсказку BootStrap, но это не влияет на встроенную подсказку при наведении мыши.

Все еще с нетерпением ждем решения, о котором вы можете подумать.

...