How are these tooltips done on a technical level?

[vernal girder]

I've been considering recreating the tooltips from League of Legends in the game I'm working on, but I don't really understand how they work behind the scenes without becoming completely bloated/inefficient. If you have 10 different damage types, do calculations within the ability description etc... what are some approaches to this from an architectural perspective? I'd love to discuss - and any resources to read up on it would also be very welcome!

[potent onyx]

Some parts will be hand written and configured for this ability but some can just be read and produced at runtime quite easily

What parts specifically are you interested in?

[vernal girder]

Honestly thinking about it now idk why it's been on my mind for so long as it really does seem simple - is it the same way as you'd do text with the textanimator asset? ("<magic>{damage}</magic>")?

for the part that defines the colours/text effects, would that be contained on a massive scriptable object?

or is there a better way of doing that part?

[potent onyx]

Tmp and UITK van easily do in text styling

And using string.Format() we can easily substitute in special data into some string

Meaning it's not hard to achieve this

[vernal girder]

I'm super confused, I feel like I'm missing some question I had because there is no way I was so lost on this lol

So would the architecture go like this: text -> UI -> Tooltip Formatter (static) -> TooltipDefinitionCollection (Scriptable Object) -> TooltipDefinition, where TooltipDefinition is a custom type with string start/end tags, colour, text effects etc.?

[tawny owl]

a tooltip likely sources the data from multiple data-assets that define the gameplay features/tuning (single source of truth), multiple localisation table entries (smart strings that are hydrated with the query data) and maybe some additional config that is specific to the tooltip use case. you can be almost assured that this kind of tooltip is not derived from just one text source. the styling is purely a visual problem and there are endless ways to define it (depeding on the ui framework you're using)

[potent onyx]

Hydrated?

But yes some localised template would be retrieved and filled with relevant data to produce the final result

C# string formatting is great for this and I've used it many times for localised text.

e.g.
"Damage: {0}. Speed: {1}"
thing.text = string.Format(translation, info.damage, info.speed);

[tawny owl]

its actually an insufficient tool for that, since the syntax does not allow the string author to express the full complexity of language variations relating to plurality (zero, one, two, few, many, 1st, 2nd, 3rd, gender/pronouns, grammatical cases and role dependence, a/an, verb forms, counters/classifiers/measure-words, politeness/honorific modifiers etc.). unity's localization package has a fully featured smart string implementation that solves all those issues, including tool support, variable binding and validation mechanism. C# format syntax deals with substitution, not with translation issues outside number/date formatting.

[potent onyx]

Damn those are pretty cool but I made do with these and having our own translation system for key to translation mapping as well as custom plural translation

anyway i hope the idea of data insertion into some text is understood regardless of translation details

[placid perch]

I've done this outside of Unity by requiring each "effect" to have a way to produce a visual element (or maybe just a piece of text) to represent itself.

In this case, the effects would need to be given some context in which they're being evaluated.

This means that whoever is displaying the effect is responsible only for providing a context

the effect returns a VisualElement (or just text, depending on your use case)

"effect" is too narrow here (that'd be the entire ability); you're interested in the specific values it's showing

but it's the same principle

each of those colored bits is a formula

the formula produces a number when given a context to be evaluated in

and can also "explain itself"

that's the verb I wound up using once, actually:

"Explain"

it was for this exact use-case, where you have a damage value based on a variety of stats

[potent onyx]

Another case for why UITK is the way forward.
I am hoping to trial it in a future project in some areas mixed with UGUI

[placid perch]

I've done similar stuff with UGUI tbh

(but not with making large paragraphs of nice-looking text)

^ also, the Localization package is really nice. I haven't actually started localizing my game yet, but everything is using LocalizedStrings

including using variables to built more complicated strings

[potent onyx]

I guess if you prepare with UGUI its possible but its not as easy to insert random stuff later.

[placid perch]

i just need to comment that this thread appeared in my dream last night

i was inside of an MMO and i saw someone REALLY nice ability statblocks

(it was some really broken garbage: infinitely stacking multiplicative damage vulnerability)

don't add that to your game!

[vernal girder]

That's basically been me the past few days, just can't stop thinking about this system despite it being far away on the list of priorities at the moment lol

Thank you everyone for all your input - it's been really useful. I haven't even thought much about localisation yet, which I should prob implement *before doing a massive text-based system lol

Another thing I'm curious about, and this actually isn't in League but I've seen it somewhere else I think - when you have a tooltip and a part of it says "+10 Intelligence", and hovering over that part of the string then opens another nested tooltip that explains what Intelligence does... how is that done? Is this something even possible with TMP?

[potent onyx]

Tmp does have a thing to detect if you click a link in text so Id presume you can use that with hovering too.

I presume this is much easier in uitk

[sage plaza]

Its very simple. If youve evr seen the multiple times their code breaks.

Their text is like
And then do @champ_ability1@ damage

Textmeshpro can easily do html markup. So you just do a simple

Text.replace(“@champ_ability1”, $”<color red>{damage}<color>”);

Its literally just a bunch of replace which turn symbols into html, to add colors, numbers, etc. You make a basic desc with symbols and your code replaces those. Easy.

Ps im on mobile sorry for no formatting

You can even make it so writing

Hello (man) whats {up}

Will replace those symbols to make man appear red and up appear bold, for example

[potent onyx]

Late to the party bud

[sage plaza]

Oops lol i missed his last msg. In that case

[sage plaza]

Theres a plugin that syncs everything to google docs (cant remember the name atm), and from there you can easily use AI or any other translation app/people to translate while keeping specific tags/symbols intact from the beauty of your web browser

Adding this into the project is EXTREMELY easy. You wont lose much time by doing it last, just copy/pasting your text onto google docs