Sprite tooltip

Phaser 3
1

How I can create a tooltip on mouseover sprite?

  var village = this.add.sprite(1500, 1500, 'village').setInteractive();

  this.input.on('pointerover', function () {
    console.log("hover");

  });

I found this method but don’t know what to do next?

2

Hey there,

the code you mentioned will log “hover” if you hover over anything I guess.
So use village.on('pointerover', function () {}) instead.

With this code you know when the cursor is over your sprite. Then you have to render some kind of content. A tooltip could be a rectangular with text on it. And then the tooltip must be positioned somewhere near your sprite’s x and y coordinations.

And don’t forget to destroy or hide your tooltip, when the pointer leaves your sprite.

I created a CodePen for you with an example. Tooltips can be very complex if you want to position them (on top of sprite, on the left etc.) based on the sprite’s position. But maybe this simple example helps you to get started.

2 Likes
3

TYVM. This is what I was looking for.

4

I have another issue. I would like to make many sprites and use one tooltip for them.
for (var i = 0; i < 10; i++)
{
this.add.sprite(i32-16, i32-16, ‘village’).setInteractive();
}

I’m not sure how to set position related to village. I tried gameObject but it didn’t worked.
this.input.on(‘pointerover’, function (gameObject) {
console.log(“hover”);
tooltip.setPosition(gameObject.x / cam.zoom, gameObject.y / cam.zoom)
tooltip.visible = true;
});

5

you should be able to that, but you need the second parameter, not the first - see here

1 Like
6

That’s good idea but how can I achieve to set tooltip on right site of object?

Now it’s setting it in that place that I will point on gameObject.

7

OK. I have solution:
this.input.on(‘gameobjectover’, function (pointer, gameObject) {
console.log(“hover”);
tooltip.setPosition(gameObject.x, gameObject.y)
tooltip.visible = true;
});