Boards›Dev Corner

Tooltips Update

RiotRiot Reinboom·7/12/2018, 6:05:59 PM·1 votes·95,482 views

#Tooltips Update Hi! Reina "Riot Reinboom" Sweet here bringing you an update about tooltips.

Tooltips in League are both one of the most important features in the game as well as, somehow, one of the least updated. They have gone from the time before season 1 to now with nary a change beyond some color changes and a couple lines added to keep things separated.

That lack of change wasn’t without reason. Each attempt at them was met with the scary overbearing cloud of “Wow, that’s a lot of champions. And a lot of languages to translate those changes into. Oh no.”

Well, we’ve decided to finally take that plunge into updating them, and trying to solve one of the bigger problems the LoL tooltips face.

This dev corner covers the problems we’re trying to solve, the current progress, and some future looking things. And to call out that for those future looking things, this is all very much a work in progress we would love your feedback on. :)

#The Big Problem For League, tooltips serve two major use cases:

In the moment - “What’s the main thing that happens if I press this button?” With a bit more familiarity this becomes more nuanced like “what’s my cooldown?” or “what’s my highest damage skill?” All the details - “How do I maximize this ability’s potential and use it most effectively?” There’s a lot of parts to League, from items to which position you’re in, and understanding how those parts hook together requires a lot more detailed information.

By trying to serve both cases the current tooltips manage to serve neither very well.

Perhaps the clearest example of this are scaling values (aka ratios). Let's look at Ezreal's Mystic Shot: https://i.imgur.com/DvzQnZc.png

Pretty simple tooltip, but there’s some problems. “dealing 15 (+79)(+0) physical damage” lets us math out that it deals 104 damage (before mitigation) pretty easily, sure, but doing the math can still take up time when every moment counts. Worse though is if you want to know what you should buy. To arrive at that Mystic Shot has 1.1x Attack Damage ratio requires an annoying bit of division and you entirely don’t get to know what the Ability Power ratio is until you buy an item.

So, here we're off the mark with "In the moment" and completely missed with "All the details". If we try to fill the tooltip to the brim with information to solve for “All the details” we will end up a cluttered mess unless we sacrifice showing your current damage that “In the moment” asks for. Either way, we lose the “In the moment” case needed for faster decision making. This problem isn’t exclusive to how abilities scale, either. Many tooltips tread the line between the two worlds poorly even when describing the non-numerical parts of how a spell functions.

##Proposed Solution We think we can tackle these issues by presenting two options; one option to show the "RIGHT NOW" and another option to deep dive further.

Enter "Press [Shift] for more info" We just give each ability two tooltips serving each need.

There’s a preview of this feature with the Aatrox update:

https://i.imgur.com/jQjmVyF.png

https://i.imgur.com/5zgPie6.png

##Future Looking This type of feature isn't new to other games. But, it's still new to League and we really need your feedback on where to take it for the sake of LoL specifically. Consider Aatrox more like the "first flare for feedback" rather than a declaration of where all tooltips will go.

With each champion update and new champion we will take another attempt at landing in a better spot about what the correct mix of information is, and potentially other small new features. All the more feedback on these you can provide, the better we will get them.

One clear example of feedback we’ll be acting on is the demand for “let me just always see more info!”. Look forward to the option for exactly that in an upcoming patch.

##Future Future Looking Unfortunately, there’s some parts of the tooltips we simply can’t upgrade due to constraints imposed by how we originally built them... for now.

We’re in the middle of tearing apart the pieces of every tooltip in the game and reconstructing them in a very VERY new way behind the scenes. Some new things (like “Press [Shift] for more info”) we can release individually, but many new features we cannot. Once everything is over to the new system though (tentative sometime during preseason) you can look forward to some larger scale changes!

And to really hit that idea, here’s a look at Ezreal's Mystic Shot we're testing internally (VERY WORK-IN-PROGRESS):

https://i.imgur.com/pCWsh2y.png ("In the Moment" version)

https://i.imgur.com/xm5Z4fV.png ("All the details" version. Note: The "+1.1" and "+0.4" are ratios and not totals).

And that's where the tooltip update project is at right now! Let us know your thoughts, and what use cases you want tooltips to serve!

142 Comments

Mysticman897/12/2018, 6:15:32 PM26 votes

I generally like all the details (and so envision myself using that option), but it would be nice if all the details also showed the final result (e.g. "15 (+1.1)(+0.4)=94 physical damage" so I really have everything of interest on that single tool tip.

edit: Also, if showing all the details was the default option (and the above isn't incorporated), could hitting shift with that option enabled show us the in-the-moment details?

ImaginesTigers7/12/2018, 6:14:11 PM14 votes

Hey! This looks sweet. One of the issues players seem to be having with Aatrox's tooltips, though, is that information is hidden under the shift key when it's information that should really be readily available (I know his E grants him attack damage; I'm looking at the tooltip to determine how much). Basic numbers should always be available, I feel.

What I would love: some communication for AD champions on whether some abilities scale with total AD or bonus AD. An example of this is Caitlyn, who has both ratios for bonus and total on different abilities. She was just the first one that came to mind but there's loads of examples. Any comments on those instances? :)

Additionally: if you're going ahead with this, there are some champions that could really benefit from more information. For example, Taliyah's Q damage is really hard to determine for most players, and varies against champions, minions, monsters. Ahri's W tooltip provides a "maximum single target damage" stat. Is there a way to get that in for some other champions?

Inting Tarzan7/12/2018, 6:12:12 PM6 votes

Looks preety nice and would really appreciate this. :D

flavSb7/13/2018, 9:06:54 AM5 votes

It would be even better if it was a toogle. I don't really see myself pressing Shift everytime I need extended details on abilities. I would prefer having them all displayed at once. Especially since I binded shift to another in game action.

AcrylVapor7/13/2018, 6:13:33 PM3 votes

My feedback: Really like that it shows the numbers for each level of the ability. Keep that. Please don't unnecessarily reword things between simple and detailed versions of tooltips, it's confusing when you swap.

Depresso Stronk7/12/2018, 6:12:52 PM3 votes

Great Feature. i think such imformation is really important to new players. I really like the new look of the tooltip. Only thing you might want to do is add these things to your website, so we can look up information here, and not on some 3rd party site.

ModThe Djinn7/12/2018, 6:22:51 PM3 votes

And that's where the tooltip update project is at right now! Let us know your thoughts, and what use cases you want tooltips to serve!

Looking at the Ezreal example, I think it delivers in a way the Aatrox example doesn't. For example, to me, knowing that the damage increases by 25% is actually really different from knowing that it increases by 5% -- and that one extra number doesn't complicate things further while giving me a very good indication of the power increase I get as a reward -- important for training people to use the Edge of the effect more. I also think the Ezreal example would benefit from something that says "fires a bolt of energy that damages the first enemy hit", as some bolts in League pass through, and others don't. Hell -- Ezreal himself has both first-target and pass-through bolts.

I also wonder how your icons will distinguish between base AD and bonus AD, or bonus health/base health, which I feel is important to convey. Since the complicated visuals already require a bit more reading, I wonder if simply saying +1.1 bonus AD [XX] might not be the best solution here, where [XX] shows you the current damage gained. So that line might look like this:

Ezreal fires a bolt of energy that hits the first target struck, dealing 15 (+1.1 total AD [90]) (+0.4 AP [40]) physical damage (applies on-hit effects)

It's also a little odd seeing bonus damage as a stat, when nothing in the text of the ability implies that the effect adds bonus damage, but rather seems to imply that it has a flat damage value. I'd consider either rephrasing it as "Ezreal files a bolt of energy, dealing attack damage + 15 (0.1 total AD) (0.4 AP) bonus physical damage" or changing "bonus damage" to simply "damage".

Elbani7/12/2018, 6:14:07 PM3 votes

Tooltip says 15(+79)(0) for Ezreal's mystic shot. Then the text says 15(+89)(+0) which when 'mathed' out is said to give 114 (but is actually 104).

Enderized7/12/2018, 7:04:11 PM3 votes

I really like the Idea.

Would like to see an option to always show the "Detailed" Version tbh. (like in the Runes)

But more importantly- In the "Detailed" Version you may currently see the Basedamages+ratios.... which means it isn't really "Detailed" but more "simplified" in my opinion. I would rather like to see the Detailed Version like this:

[Q] Mystic Shot 5,5s 28Mana

Ezreal fires a bolt of energy, dealing 15+ 79 (1.1AD) + 0 (0.4AP) physical damage (applies on-hit effects).

Ezreals cooldowns are reduced by 1.5 seconds if Mystic Shot hits a target

And so that. As I personally want to know, what of my stats providing the exact amount of damage rather than just a scaling in which I have to do quick math such as before.

The Addition of the Stats change over certain Spell ranks is, as I think, a good way to go. Keep that!

Beside that- in the Patch 8.13 I realized the Item tooltips have changed as well... And I'm totally fine with that. BUT...

Please consider making the +Stats in a brighter color again so you can immediately see what stats an Item is providing.

Currently, the whole Item tooltips are in one plain grey color making it hard (especially for new Player) to see the power gained by an item. I mean: You even marked the Passives in some kind of orange if I'm not mistaken.

Would like to see that.

Overall: Good Job so far!

Greeting Florian "Lafiron" Lichtenstein

IzzŸ7/12/2018, 6:15:46 PM3 votes

I have one issue with the "Press [Shift] for more info" build - I always want the more detailed information. Some players will be different to me - some will want to see only simple info and some will want the ability to switch between them. Could there please be an option to perma-toggle them in the options menu? I don't play on a keyboard or with standard keybinds so adding in an extra button to know is a big barrier to usability for me (I still haven't figured out the "enemy vision" ping because of the way I bind my keys + use attack move click)

All looks super exciting though!!! Ratios definitely would be great to see in game.

Mudkas Meat Hut11/18/2018, 6:57:02 AM2 votes

I REALLY like where this is going. The Mystic Shot example looks great. As someone who's been playing less than a year: the simple version would help give me a quick understanding of how strong my abilities are at any given moment. The detailed version makes scaling much clearer with ratios and AD/AP icons, helping me make better decisions about items to buy and which ability to level up next.

Abarn7/12/2018, 6:32:04 PM2 votes

Omg the future outlook one is so good. I've always been frustrated not being able to see ratios knowing if I should be buying more heavy AP items or more AP items with effects. Glad you guys are talking about this!

Korend Slicks7/12/2018, 6:58:28 PM2 votes

That Future Future Looking Tooltip is amazing for me! If the tooltip had the calculated number from the ratio along with its ratio, I would forever love the transition!

DCYOUNG8887/12/2018, 7:00:34 PM2 votes

Are you going to add in the range of the abilities in the tooltip also? It would make it much better to know your ability range without having someone datamine it or look up the ability range on the wikia site.

EDIT: For example, maybe the range should be listed below the cost in the tooltip.

shentorianus7/12/2018, 9:55:28 PM2 votes

Just add cast time and range and we're dota

Viper87077/13/2018, 12:19:00 AM2 votes

While the new style and font looks clean and intuitive I particularly dont like the difference and reduction in clarity that the "detailed version" provides. In the simplified version you can quickly glance how much and what type of damage you deal, all the calculations are done, and in the moment it really helps.

The "Detailed" version on the other hand, while yes, it does provide much more detail and is really great to see(Especially the ratios, thank you) the fact that you have to calculate the damage in your head during the game is a bit baffling and counter-intuitive. As some comments pointed out, the final calculation of the damage and damage type in the detailed version would be much better. Its absence is also perplexing in the detailed version due to the sheer amount of dead space in it. The current mana cost has no reason to be under the current cooldown in the top right, and creates a lot of unused space.

I made a quick mock-up of what maybe would be useful for the detailed version and could put some of that dead space to use. http://puu.sh/AVqLA/986e86d0c0.png

Also I dont see much point in knowing future rank cooldowns and mana costs. That information is still present in the the ability level up and honestly I dont think you need to know what its going to be in future ranks, the use cases for such knowledge are very very niche imo and rarely useful. What could be used, instead of providing the ratios in this iteration in the main area, it should go back to the old way of showing the amount of damage converted from those ratios. The ratios themselves should replace the future Mana cost or Cooldown part of the view in the bottom.

Overall just adding the total damage calculated to the detailed view is my pressing concern, since playing the switch back and forth between the streamlined and detailed versions kinda goes against the clarity principles.

Steelflame7/13/2018, 3:03:20 AM2 votes

I think the biggest change you should keep in mind is Total vs Bonus AD ratios as well. We need clarification on them, especially if base AD granting items return in the future.

Forger of Days7/13/2018, 1:23:18 PM2 votes

I am a little late to this discussion, but wanted to take the opportunity to mention a tooltip that is in serious need of some TLC.

Anivia's passive gives almost no information about how the spell works. I'm posting from mobile and can't check right now, but I believe it only says something to the effect of "when Anivia dies, she reverts to an egg. If she lives, she is gloriously reborn" with no mention of numbers at all, including CD, the armor/MR change (I didn't know about that till I went to the wiki) or duration of the egg. It could definitely use some updating.

GilGaMeSh Jr7/13/2018, 3:50:11 PM2 votes

HOLY SHIT!! Been wanting this for a long time. Since i switched over from Dota2 to league, how much i get per level not showing was driving me nuts.

thefance7/13/2018, 4:49:53 PM2 votes

Wow, the Mystic Shot example looks great.

My only suggestion is to evenly space the values for "Bonus Damage", "Cooldown", and "Mana Cost" such that they form a grid.

TheTomnus7/17/2018, 5:50:18 PM2 votes

For me personally, tooltips are something quite close to my heart. I think players should have access to as much information about their champion as possible to make the best decisions about how to itemise and understand where their damage or utility is coming from.

However, I feel that creating two types of tooltip (one simple explanation and a detailed version) creates an unnecessary amount of work, when instead work could be done to make the tooltip layout consistent across the board.

And the key word here is consistency. Players will get confused if the same stats are referenced in different colours, or abilities with similar characteristics are described differently.

With all that said, I made my own mock-ups of how I think tooltips should be laid out.

SIMPLE

MY VERSION

  • 1 -- Adding the ability ratios to the top of the tooltip. I think this is the perfect place for ratio scalings to be placed. You even had to clarify yourself, Reinboom, that in the detailed view the numbers inside the ability text were not totals but were in fact ratios. This would confuse the player when they read through the ability. Removing them from the ability text ensures players don't get confused. I also changed the colour of the physical damage ratio for consistency (It was previously a very light brick colour). If colours are going to distinguish damage types and differentiate stats, the colours need to be consistent.

  • 2 -- Explaining the ability in more detail. A simple tooltip should not be "simple" so to speak. If you really wanted a simple explanation of Ezreal's Mystic Shot you could just write "Ezreal shoots a bolt of damage". A good tooltip should explain to the player how an ability behaves in a concise and unambiguous manner. In my opinion that doesn't mean it can't contain a lot of information, or as much info as possible without being overwhelming. In hindsight, you could even expand my description further to say "stopping at the first target hit".

  • 3 -- Tooltip interaction. This previously said "press", but you do in fact have to hold the chosen key to access detailed information.

Overall the tooltip is simple so as not to confuse new players, while also containing relevant information that any players will find useful and can easily see at a glance.

DETAILED

MY VERSION

  • 1 -- Ability damage breakdown. This is pretty much the way tooltips are structured now, but with the addition of the ability ratios present at the top of the tooltip, a player can see where the ability's damage is mainly coming from. Worth noticing is how I labelled the ability base damage in white. I think it's important to distinguish base damage from bonus damage provided by stats, mostly so new players aren't confused.

  • 2 -- Just fixing a categorisation error; this previously said "bonus damage", whereas the text is referencing the ability base damage.

Overall this detailed tooltip not only provides more information but is still easy to read due to colour consistency and tooltip layout.

I also created another example with a much more complex ability, Riven's Q. (Current tooltip for reference)

SIMPLE

MY VERSION

DETAILED

MY VERSION

I believe even with the large amount of information in the tooltip, it isn't overwhelming and the layout and wording (which I changed) makes it much clearer. The language in the tooltip is just as important as the numbers!

Anyway I really appreciate that something is finally being done about tooltips! Looking forward to some good changes hopefully. :)

TL;DR just look at the pictures and tell me what you think lol

DennisOkiba10/23/2018, 8:19:16 PM1 votes

Hello my friend

Ashe

Domasis7/12/2018, 6:18:49 PM1 votes

I'm loving the way you guys are using Ezreal's tooltip to show us how you plan on delivering this information. I have a few questions though.

Will you be using colors as a way to differentiate between Magic/Physical/True Damage, or will you include healing, shielding, and movement speed buffs with the colors. Like healing being shown as a green number on the tooltip, etc.

Are the numbers you have listed at the bottom of the tooltip going to be the standard, moving away from how the per rank tooltip that exists now? (The one that shows you the increase in numbers if you rank the ability on level is)

What are some of the constraints you're referring to? Are you referring to the monolithic stuff that exists at the core of LoL in-game that isn't easy to change, similarly to the monolithic stuff in client that caused Clash to get overloaded?

Taikobou7/12/2018, 8:35:24 PM1 votes

The Future Future example looks amazing. But aside that, speaking about the interface, where you see the abilities icons and you see the letter on the bottom left(QWER), mana cost at top right and CD counter on the center, i wonder if we could have the damage at the bottom left, just like we have the charge of items like Luden's Echo above the HUD, so you know when it is at 100.

Here is an example. Look for the W, with the 70 of damage at bottom right.

https://ibb.co/gKM1bo

Fargo797/17/2018, 11:06:12 AM1 votes

They really need to make all champ stats and abilities available when a person clicks on a champ and looks up what their abilities do.. not just give a VERY brief description. Like what kind of scaling does it have? how long is the CC for? what is the range of the ability?? i hate having to go to a 3rd party website to find this stuff out.. Riot should have all this available on their client..

The Storms Fury7/17/2018, 3:16:22 PM1 votes

Hey, I made a post on Reddit 2 years ago about updating the tool-tips and got quite a bit of feedback. Here's the link.

As for the very work-in-progress example, here's my two cents: I'm glad you chose to unite the cooldown and mana to the right, I always found it annoying having to look to the left and then to the right to read information that falls under the same category, that being "requirements for casting the spell". The left side should stick to having only trivial information. The thing about the cooldown and mana however is that they don't follow the same format. You have an icon followed by the amount for the cooldown and the amount followed by the type of energy, in this case mana. It kinda feels like the icon was thrown in there for the sake of having it.

World Ender7/12/2018, 6:15:53 PM1 votes

Quick question, for the concept you posted at the end, how would you propose it to interact with the option to always show the advanced tooltip? Would it still show the total damage output, in addition to the ratios?

A Balanced Champ7/12/2018, 6:19:28 PM1 votes

Riot plz... It says 15(+79) which is 94... not only did you misread the numbers and add 10 to the scaling portion (15(+89) ) but when you mathed out the values you came to 114 which is 10 more than the correct value of 104...

Toxic Dusty8/2/2018, 7:42:14 PM1 votes

Friendly reminder that you guys still haven't implemented this in a way that makes sense

CoffeeAndSadness8/22/2018, 8:36:54 PM1 votes

Hey, there is an ong-going problem which your support team told me to talk to a dev because they have no connection to you.