Home/ Questions/Q 8817131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T04:46:31+00:00

I’m making a web application that uses Kinetic.js for some fancy graphical functions, and

  • 0

I’m making a web application that uses Kinetic.js for some fancy
graphical functions, and I want to show a tooltip with some information about each element when the users hovers over it.

I’ve already figured out how to invoke a function on hover with 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
}

I’ve decided to use the seemingly nice Opentip to show the tooltip.
The only problem is that Kinetic.js doesn’t create any usable DOM elements to use as a target for opentip.

This is (roughly) what my HTML looks like:

<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>

Important to know is that these canvas elements all have the same width and height and stack on eachother. So they’re unusable as targets.

So instead of using a DOM element to use as the target for my tooltip, I need to
manually show/hide and position the tooltip.
I’ve figured out how to do the showing and hiding like this:

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

I now do the following:

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

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

The only problem is that it just shows up at the top left of the page, and I can’t find anything in the docs on how to position this thing manually.

Suggestions or ideas welcome. I’m also open to using a different tooltip library, if necessary.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I managed to solve the problem like this, for those of you who are looking for a solution too:

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

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

});
    • 0