How to use the onering.js code to create Tooltips on your site.
If you’re comfortable editing your own HTML and/or forum headers then all you need to do is grab the code from this page and drop it into either your forum Skin’s header block or the head section of your page’s HTML.
The following code is everything you need to get started. Make sure you copy everything between the <script> tags. You don’t need to edit or change anything. You can drop this code into your site as is.
<script type=”text/javascript” src=”http://content.level3.turbine.com/sites/lorebook.lotro.com/js/onering.js”>
</script>
The script works with all of the following entry types:
- Weapon
- Armour
- Item
- Quest
- Deed
- Trait
- Skill
- Perk
It does not currently work with area, tool, region, and several other tags.
Once the JS code is placed on the page, creating the tool tip is simply a matter of placing a supported link in your html somewhere.
Text link: <a href=”http://lorebook.lotro.com/wiki/Weapon:Dagger”>I’m a piece of text</a>
Image link: <a href=”http://lorebook.lotro.com/wiki/Weapon:Dagger”><img src=”http://content.turbine.com/path/to/some/image.png” /></a>
In both cases the script will find the lorebook URL and generate a tooltip when you mouse over either the link text or the image.
If that was all Greek to you, read on and I’ll walk you through adding the script to a forum.
Tooltips in your forums
This example uses VBulletin as its basis however, it will work much the same on any forum software. You’ll just need to find the corresponding header section of your template.
Note for Invision users: Invision’s template system is a bit different. You’ll want to put the code at the top of the header and outside of any other call routines. Otherwise you can end up generating weird things in weird places.
Getting started
Grab the code above (the one with the <script> tags around it) and paste it into notepad or some other text editor. You want to do this to make sure all any formatting tags are cleaned before pasting it into your site. Nothing says kaboom like stray tags.
- Log into your forum’s admin panel and Click the “Styles & Templates” link on the left side menu(remember, this example assumes you are using Vbulletin).
- In the drop down menu choose, “Style Manager”
- With the style manager open you’ll see all of the styles (skins) your forum is currently using. If you are using more than one skin on your forum you’ll need to repeat this for each one.
Click the << >> button to open the style
- The list on the left is all of the scripts that make up your VBulletin skin. Find the ‘header include” and hit edit in the right hand menu.
- The scary thing you are looking at is the code that calls all of the includes for your forums. Mess it up and your forums will break. So we won’t mess it up, right?
- Scroll all the way to the bottom of the code. There should be a </if> at the very end. (See image)
- Copy the code out of notepad and paste it into the admin window just after the last </if>. You should place it on a new line.
- Once the code is pasted in just hit SAVE at the bottom of the editing area.
You’re done. The code will now take any link it sees to the lorebook and try to parse it. If it finds a hit you’ll get a tooltip; If it doesn’t you’ll get a ‘not found’ box.
Getting Fancy
If you want to get fancy and provide your forum members with an easy way to generate tooltips you can create custom BB code as follows.
Again, all forums use similar BB code creation methods, but this example uses the VBulletin editor. The result will be the same regardless of the forum you use.
Because the onering.js code takes a URL and parses it to find a tool tip this requires the person posting an item to have gone to the lorebook, looked up the item, and then come back to your forums and paste the link into their post. What if all they had to know was the name of the item or weapon? BB Code can help you out.
Creating a custom BB code tag will make it possible for a poster to use a tag, like [b][/b[ to create bold text, instead of having to look up the entire URL first. So they could use [item]Coal[/item] instead and still see the tool tip. The BB code generates the URL for them.
Adding a Custom BB Code Tag to your Forum
Go to your VBulletin admin panel and choose, “Custom BB Codes” from the left hand menu. Then choose, “Add new BB Code”.
Refer to this image to create an [item] tag. All other tags will use the exact same format so just replace ‘item’ with ‘weapon’ or whichever tag you’re creating.
You can create a tag for each type of supported entry; item, weapon, armour, quest, deed, trait, skill, perk.
Copy the codes below and use them to save time (and typos). Just drop the correct code into the “replacement” section for the tag you’re creating. Keep in mind; capitalization counts!
- <A href=”http://lorebook.lotro.com/wiki/Item:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Weapon:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Armour:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Quest:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Deed:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Trait:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Skill:{param}”>{param}</A>
- <A href=”http://lorebook.lotro.com/wiki/Perk:{param}”>{param}</A>
Make sure you name your tags something useful. No one is going to guess that ‘[stuff]‘ is your item tag or that [gear] means armour. Stick to naming the tags the same as their Lorebook entry type. That will help your users figure it out.
Some tips on using the BB Codes.
Spaces before and after the item name will break the code.
- Right: [item]Coal[/item]
- Wrong: [item] Coal [/item]
You must enter the name of the item correctly.
- [armour]Doom-hunter’s Breastplate[/armour] is the correct entry and works correctly
- [armour]Doom-Hunter’s Breastplate[/armour] will generate the tooltip but not a valid link to the lorebook.
- [armour]Doom hunter’s Breastplate[/armour] will not generate a tooltip or a valid link
As a general rule if you are typing the item name exactly as it appears in-game, you’re probably good to go!
If you have any questions or are running into issue, please feel free to drop me a PM!
Update: Make sure you check the comments below to find out how others are using this code, or tips for using it with Invision Power Board. Also, check out ScrappyTheGreat’s tips for making this work with Guildportal sites.
Update to the Update: As some have pointed out below the quotes in all the example above have been converted to ‘curly quotes’ by my.lotro.com. You will have to replace them with ‘normal’ quotes (pasting into notepad doesn’t do this) before using the example. If you don’t, things will be…..bad.