About the Extension

This Extension came about when one day I was watching League of Legends on Twitch and realized I had fallen so far behind in the meta I had no clue what half of the champions being played actually did let alone know what made them so powerful. I left the stream to investigate and after I got halfway through Aphelios' 9th ability I gave up. A few months later I tuned in for DOTA2's T.I. and they had an extension that let you see ability tooltips that mirrored the ones you would see in-game if you were playing. I thought “Hey, why doesn't League have something like this?” and that's how the extension was born.

League of Legends Live Tooltips is a Twitch overlay extension that provides a valuable tool to help new or returning viewers gain a deeper understanding of the game. The extension overlays the in-game HUD and allows viewers to click the same buttons as the player and see exactly what each ability does. The information is presented in an expanding tooltip and mirrors the information the player would see in-game. This allows returning viewers that took a patch off to catch up on changes to a champion and allow new viewers to learn about the abilities in real-time. This keeps eyes on League of Legends and encourages viewers to actively engage and understand the Champions without having to leave the stream.

The goal was to make an extension that allows the Broadcaster to provide valuable information to both new and veteran players of the game. If you miss a patch, a season, or just tune in for a new champion all of the information is just a click away.

Features

League of Legends tooltips is a full-screen Twitch extension that functions as an overlay. Five transparent buttons sit on top of the in-game hud and viewers can click them to bring up a tooltip with all the information you would see if you were playing the Champion. This includes the full ability description, the resource cost, cooldown, cast time and any effects the ability has. The data is updated daily to catch the most recent patches as they happen.

The extension only requires a Summoner Name (soon to be Riot ID) and a Region. The extension itself is triggered by the natural calls Twitch makes when a stream goes live but it stays hidden until a match is found. It also includes the ability for a Broadcaster to add a delay that fits their queue time and a manual start button if the Match starts early or the system fails. If a Broadcaster changes regions mid-stream we have built a live configuration update feature for a seamless transition between any region with a dedicated Riot Games server.

Only the broadcaster needs to install it for all viewers to have access. The extension automatically begins searching for active games, identifies the broadcaster's Champion and generates tooltips for them. The overlay continues monitoring throughout the game to identify when the match ends and then automatically hides while waiting for the next active game and repeats the process until the broadcaster goes offline or turns off the extension.

We plan on adding these features in future updates:

• Tooltips for the broadcaster's entire team
• Manual Champion Selection
• ARAM buffs and nerfs
• Patch note changes on abilities
• Full Item Tooltips
• Full Rune Tooltips
• Mobile support
• Shop support
• Ability Video clips
• And much more!

If you have a feature you'd like to see that wasn't listed, or suggestions for improvement on an existing feature make a request and I'll do my best to implement it.

Gallery

Below is a gallery of screenshots of the extension in action followed by a video that shows what a viewer watching League of Legends with it enabled would see.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Starter Guide

The extension is designed to be as simple as possible to use. The only real requirement is an active Riot Games account and an active Twitch account. The following sections will take you step by step through the process of installing and using the extension. It's a broadcaster-only extension so only the streamer needs to install it for all viewers to have access.

Installation

To install the extension on your Twitch Account you can click the button in the top right corner of the page which will take you to the Twitch extension page and then click the purple install button. You can also search for the extension manually by going to dashboard.twitch.tv, clicking on the navigation tab, and selecting extensions. From there you can enter League of Legends Tooltips in the search bar, click on the extension, and click install.

Once you have installed the extension you can go to your channel and click the puzzle piece icon in the bottom left corner of your creator dashboard. From there in the My Extensions tab you can click on the dropdown menu for League of Legends Live Tooltips and set it as your active overlay. League of Legends Tooltips is a full-screen overlay extension so if you have other Twitch overlay extensions you will have to toggle the others off to see it. If you click the gear icon it opens the initial configuration page where you can set your Riot ID, Tag Line, Region, HUD Scale, and Delay.

Initial Configuration

The initial Configuration page will look like this:



The first thing you will need to do is select the region you will be playing in from the dropdown menu.



Then you will need to enter your Riot ID in the text box so we can find games your account is in and what champion you are playing.



Next, you will need to enter your Tag Line in the text box to correctly select your account from other accounts with the same name. If you hover over your profile in the client the Tag Line is the text after the # directly under your name (e.g. NA1, EUW1, RITO, etc.).

Note: You do not include the # in the TagLine.



After that you enter your HUD Scale so we can size the overlay correctly for your stream using either the slider or the text box they are both linked together.



The final step is to set the delay for the extension. The delay is the amount of time it will wait before checking if you're actively in a game. This is to account for queue times and loading screens. The default is 60 seconds but you can set it to whatever you want.



Then you can click save and you're all set! The extension will automatically start searching for games and will automatically hide itself when you're not in a game. When using the live configuration window you can change your region and Riot ID and the extension will automatically update to the new region or Riot ID and start searching for games. If you want to manually start the extension you can click the start button on the configuration page. We also included a manual stop button in case you want more control over when the extension is active.



Once you click save that will be the default configuration for the extension and it will start when you go live and give it permission to run. If you want to change the configuration from a previously saved one you can use the live configuration page located on the right side of your creator dashboard. This will both change the current configuration, restart the extension with it, and also update your default configuration so it will use the new settings the next time you go live. If for any reason the extension fails to start you can click the start button on the live configuration page to manually start it. The button fully resets the extension and will start it from scratch. If an error occurs you can click manual stop which also fully resets the extension and it will wait to run until you click start again.

FAQ

Why do I need to enter my Riot ID? Do I have to do it every time I go live?

We use your Riot ID to find the games you're in and what champion you're playing. Twitch caches your settings entirely on their end so you only have to enter your Riot ID once and it will be saved for the next time you go live.

Does this work for Aphelios?

Yes! It currently works for the entire roster and should work for any new champions that are released in the future.

How long does it take to update for new patches?

We update the extension every day to catch any changes that happen in the game. We also have a feature that allows us to update the extension in real time if there is a hotfix or emergency patch.

Is this extension available in my region?

As long as Twitch extensions are available in your region the extension will work. We currently support all regions that have a dedicated Riot Games server. However, we currently only support English, but that's a limitation of my language skills and not the extension itself.

Do I have to install this extension as a viewer?

Nope! The extension is a broadcaster-only extension so only the streamer needs to install it for all viewers to have access.

Does this work for ARAM?

Technically yes! We haven't adjusted the extension to account for the buffs and nerfs that happen in ARAM but it will still show the base tooltips for the champion you're playing.

Do I have to pay for anything?

Nope! The extension is completely free. I just wanted to make something that would help people. If it becomes popular enough I might add a donation button for server costs, but that's it.

How do my viewers use the extension?

The buttons are overlaid on top of the in-game HUD so your viewers can click the same buttons you do to see the tooltips for the corresponding ability.

Does this work for Champions that have multiple abilities on the same button?

Yes, it does! We have a feature that allows us to detect when a champion has multiple abilities on the same button and we included arrows that allow you to cycle through the tooltips.

About Me

Hey, I'm Jake! I have a couple of sweet cats that double as my co-authors and a pair of dogs that keep me on track. I play too much World of Warcraft, drink too much coffee, and I like making things easier for people. I got into programming during the pandemic, fell in love, and I haven't looked back. I've been working on this project for a few months now and I'm proud of how it turned out.

I planned it all out from scratch and learned a lot about serverless architecture, APIs, good design practices, and a hundred other things I don't have space to list. If you have any questions or want to talk about a project you're working on, don't hesitate to reach out. I'm always happy to talk about programming, games, or anything else you might want to chat about. I'm currently looking for a job doing this full time so if you like my work or you know someone who might like it, reach out to me and I'd be happy to talk about my projects and all of the things I've learned along the way.

JacobDuesbout@gmail.com or DuesDev@gmail.com are great places to contact me.
Below are photos of the authors of this project, from left to right: Keys, Myself, and Locke.