Ручное размещение всплывающей подсказки в сочетании с Kinetic.js

Я делаю веб-приложение, которое использует Kinetic.js для некоторых причудливых графических функций, и я хочу показать всплывающую подсказку с некоторой информацией о каждом элементе, когда пользователи наводят на него курсор.

Я уже понял, как вызывать функцию при наведении с помощью Kinetic.js:

myKineticObject.on("mousemove", function() {
    // Change content of tooltip depending on myKineticObject
    // Set position of tooltip to cursor position
    // Show tooltip
});

myKineticObject.on("mouseout", function() {
    // Hide tooltip
}

Я решил использовать, казалось бы, симпатичный Opentip, чтобы показать всплывающую подсказку. Единственная проблема заключается в том, что Kinetic.js не создает пригодных для использования элементов DOM для использования в качестве цели для opentip.

Вот так (примерно) выглядит мой HTML:

<html>

    <head><!-- Styles --></head>

    <body>

        <div id="container">

            <canvas class = "kineticjs-buffer-layer">
            <canvas class = "kineticjs-path-layer">
            <canvas class = "myLayer1">
            <canvas class = "myLayer2">
            <!-- ... more layers -->

        </div>
        <!-- Scripts -->
    </body>

</html>

Важно знать, что все эти элементы холста имеют одинаковую ширину и высоту и накладываются друг на друга. Так что они непригодны в качестве мишеней.

Поэтому вместо того, чтобы использовать элемент DOM в качестве цели для моей всплывающей подсказки, мне нужно вручную показать/скрыть и расположить всплывающую подсказку. Я понял, как сделать отображение и скрытие следующим образом:

    var tooltip = new Opentip(
        "div#container", //target element 
        "DummyContent", // will be replaced
        "My Title", // title
        {
            showOn: null, // I'll manually manage the showOn effect
        });

Я сейчас делаю следующее:

myKineticObject.on("mousemove", function() {
    tooltip.show();
});

myKineticObject.on("mouseout", function() {
    tooltip.hide();
}

Единственная проблема заключается в том, что он просто отображается в левом верхнем углу страницы, и я не могу найти в документах ничего о том, как расположить его вручную.

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

Спасибо!


javascript tooltip kineticjs
person Moeri    schedule 09.11.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Похоже (без знания Opentip, кроме быстрого просмотра документов), что вы можете установить «фиксированное» значение true в конфигурации. Поскольку цель равна нулю, в документах предлагается, чтобы fixed=true заставлял всплывающую подсказку появляться в позиции мыши, но не следовал за ней после перемещения мыши.

Как это звучит?

person michael.orchard    schedule 09.11.2012
comment
Я попробую это завтра, и держать вас в курсе. Спасибо! - person Moeri; 11.11.2012
comment
Извините, цель false не сработала. Смотрите мой ответ для решения, которое это сделало. Спасибо, в любом случае! - person Moeri; 13.11.2012

arrow_upward
0
arrow_downward

Мне удалось решить проблему так, для тех из вас, кто тоже ищет решение:

group.on("mousemove", function(event) {

    tooltip.content = //change content 
    tooltip.show();
    $("#opentip-1").offset({ left: event.offsetX, top: event.offsetY });

});
person Moeri    schedule 13.11.2012
comment
Я недавно улучшил документы по этому вопросу. Вы должны использовать tooltip.setContent() для обновления содержимого, а не просто для его настройки. Что касается размещения всплывающей подсказки, то теоретически fixed: true должно работать и появляться в позиции курсора... Так что, возможно, вы нашли ошибку. Я создал проблему и рассмотрю ее. - person enyo; 14.12.2012