Add League of Legends tooltips to any site.


League of Legends Tooltips

Getting Started

Tooltips for League of Legends have never been so easy.

  1. Import jquery and loltip in the <head> section of your page:

                            <!-- jQuery 1.10.2 and loltip.js -->
                            <script src=""></script>
                            <script src=""></script>
  2. Link to any Champion, Item, Rune, Ability, Passive, or Summoner Spell on

                        Buy a <a href="">Void Staff</a>.
  3. That's it! You're done!


LoLBuilder suggests you buy an Infinity Edge when you play Ashe.

Grab Soraka, buy a Chalice Of Harmony and then spam your Q. It also helps to have Sorcery and several Cooldown Reduction Glyphs.

Additional Uses and Options

Library Options

Changing the default configuration is as easy as setting a variable in your page header.

<!-- customize tooltips in your page  -->
    window.loltipConfig = {
        scope: function () {
            return jQuery(document.body)
        tooltip: {
            wrapper: '[]',
            showdelay: 90,
            hidedelay: 400,
            opacity: true,
            updateAnchorText: true

Quick Docs

A function returning the container to add tooltips to. optional
A string only used when you're hosting the library on your own server. Set this to the fully qualified URL to the loltip.min.css. Learn more.
string of text to wrap around each tooltip anchor text. Must be an even number of characters. It will be split in the middle with the first half inserted before the text and the second half inserted after the text. optional
integer milliseconds to hover before the tooltip is displayed. optional
integer milliseconds before the tooltip is hidden after the cursor leaves the link or tooltip area. optional
true to use the default opacity, false to disable opacity, or a value between 0.0 and 1.0 to set your own opacity. optional
true to wrap the anchor text in the tooltip.wrapper value. false to disable this functionality. optional

Render Tooltips Written to a Page After Initial Page Load

Links written when the page is loaded are automatically rendered as tooltips. If you add content after the page loads, such as a user-submitted comment or other dynamic content, you'll just need to refresh LoLTip for the area of the page with the new link.

<!-- refresh tooltips on the comments container -->

<!-- or refresh the entire page -->

Host the Library Yourself

If you need to host this library on your own server you'll just need to download the package, host the files, and set the stylesheet URL.

<!-- jQuery 1.10.2 and loltip.js -->
<script src=""></script>
<script src=""></script>

<!-- define the path to the hosted css -->
<!-- else the hosted css will be used -->
window.loltipConfig = {
   stylesheet: ''

Links that are decorated with tooltips are given the class loltip-anchor - so its very easy decorate the targets.

// This page is currently decorated with:
.loltip-anchor {
    color: #2f6f9f ;
    font-weight: bold ;

Customize Tooltips

The entire tooltip itself can be fully customized by writing you own custom CSS rules.

Tooltip Library ‐ CSS Editor

Example Endpoints

Here are several endpoints you can link to. Hyphens in the slugs are optional but are preferred.

Champions Any Champion listed here

Items Any Item listed here

Runes Any Rune listed here

Masteries Any Mastery listed here

Champion Passives and Abilities

Either by default key binding

Or by name

For RIOT API Users

Most all endpoints can also be targeted with RIOT's ids. Here are a few examples

We're unable to link to champions, passives, or abilities in this way at this time.