CODEWITHSUNDEEP
javascripttooltipkineticjs
Moeri
Moeri

Reputation: 9294

Manually position an opentip tooltip in combination with Kinetic.js

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!

Upvotes: 2

Views: 3702

Answers (2)

Moeri
Moeri

Reputation: 9294

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

});

Upvotes: 0

michael.orchard
michael.orchard

Reputation: 486

It appears (with no knowledge of Opentip, besides a quick look at the docs) that you can set 'fixed' to true in the config. Since the target is null, the docs suggest fixed=true should make the tooltip appear at the mouse position, but not follow it once the mouse is moved around.

How does that sound?

Upvotes: 3

Related Questions