Implementing Tooltips for highlighted words

Phaser 3
1

I have a paragraph of words, and some of them are highlighted in a different color. I want to player to be able to click on these words to find out more. How would I do this in Phaser?

Is there a way to attach an onlick listener to a single word in a text object? One thought I had was aligning different text objects; one would be the entire body of words that are not clickable, then one for every word that needed a tooltip/popup dialog when it was clicked. This sounds cumbersome and not flexible if the text changes, so I was wondering if Phaser had an easier way to create these tooltips/popups, or if anyone knows of a plugin.

I did some searching and testing, and it looks like I can’t attach onclick listeners to individual words, but I’m not sure if I’m just failing to google the right thing. I found a plugin for exactly what I’m looking for: https://github.com/netgfx/Phasetips but it’s for phaser 2 and I’m using phaser 3. Kind of hitting a wall, do any of you know a way? Thanks! :smiley:

2

Is there a way to attach an onlick listener to a single word in a text object? One thought I had was aligning different text objects; one would be the entire body of words that are not clickable, then one for every word that needed a tooltip/popup dialog when it was clicked.

I’d go with this. Phaser definitely doesn’t have a built-in way to get the location of a specific word in a text block. You might be able to do something clever with measuring the width of each letter and calculating where the click was inside of the whole text object, but that sounds harder than just using different instances of text objects.

3 Likes