Question How do I target a single [word] in a label in Ui Toolkit? (Hoverable word in text)

To be more specific, I want to make a text consisting of a lot of words, and when specific words are shown they are colored differently and can trigger something when hovered over. I'm not sure how to do it in the new system?

For example in my title, [word] would trigger the hover function.

I've been searching everywhere and I can't find a post about it, but if there already is one, please do send me a link!

 

And honestly, the dev team should take even more notes from html / css in the new system than they already have.

In html I would be able to do the following:
<div>
Some text inside a label. I want to <div class="highlight">highlight</div> something in here
</div>

Here I would be able to target and do anything to the inner "div" with the class "highlight".
If this is already possible in some way, please let me know how! I've been googling like a madman for a while now before this post.

 

You can style individual words using rich text tags:

This <color=red>word</color> is red.

AFAIK, there is no way to figure out which word you hovered.

Have you had a look at the Label implementation and especially on the Mouse events?

 

Yeah I know about the individual coloring or <b> and such, but that only allows me to do very specific things sadly. If I could apply a class to a single word in a label, I would be able to do.. well anything to it (animate it and such by simply giving the parent container a class and taking it away a bit after)

I've been walking through the documentation looking at the label and mouse events, and all I've found so far are different ways to see which element is hovered, but not how to see a specific part of the element has been hovered.

I hope there is a smart way to do it because I honestly love ui toolkit as someone who works in web development, but this is something I feel is missing.

 

I think the easiest way to handle this at the moment is probably to use multiple labels. Unlike HTML, text in UIToolkit is not its own standalone thing but still needs to be contained within a VisualElement, so your example above might look more like:

Code (CSharp):

1. <ui:VisualElement class="label-container">
2.   <ui:Label text="Some text inside a label. I want to" />
3.   <ui:Label text="highlight" class="highlight" />
4.   <ui:Label text="something in here" />
5. </ui:VisualElement>

This has some obvious downsides, like not being able to just reference a single label in code if you need the text to be populated dynamically, and you'll need to play with the USS style for the

hightlight

class to get the spacing between that element and the adjacent ones to match the regular spacing between words for your font...

If I was going to do something like this, I would probably create a custom VisualElement for the

label-container

which could accept a single string as input and generate the labels nested inside it based on some markup (e.g. so I could do something like

labelContainer.text = "Some text inside a label. I want to <class='highlight'>highlight</class> something in here";

).


Using mouse events might be possible as well, since they give you the local position within the element, but correctly computing which word the mouse is over could be difficult (if you have a fixed-size monospaced font it wouldn't be too hard, I guess). To make it work in general would require being able to calculate how many pixels wide and tall the text before the word you're interested in is, and I don't *think* there are any helpers built-in to do this for you (I could be wrong, though, would be super handy if there was a built-in function to do this).

 

This is also what I was thinking of doing, but I was holding off on doing it this way in case there was a better way, since it will be dynamically populated multiple times every minute of someone playing the game (Super fast gameloop roguelike with three of these every time).

Thanks a lot for the input, I appreciate it.

 

Yeah, unfortunately UIToolkit doesn't quite have the equivalent of

<span>

for text, and while Labels are VisualElements so you could nest labels inside labels... you'll get something like this instead