Knowledge Base
Article #57
Armory Tooltips for Websites
 (9 votes)
You must be logged in to rate this article.
Last Updated: 06 Apr 2018

Using the Neverendless Armory tooltips on your guild (or non-guild) website is actually quite straightforward. All you need is a little knowledge about html. (If you don't understand html then this guide is not for you. If you understand Javascript and/or CSS as well as html then all the better).

Step 1. Import the Javascript Files

Simply add the following 2 lines of html into your page's <head> section. (You may place the code elsewhere in your html if you prefer, or do not have access to add content to the <head> section.)

<script type="text/javascript" src="http://static.neverendless-wow.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://static.neverendless-wow.com/js/armory-power.js"></script>

If you already use jQuery on your site then you may omit the first line.

Step 2. Set up your links.

The tooltip library has three seperate behaviours:
1. Automatic mode - if you have any links that point to http://armory.neverendless-wow.com/characters/Acharactername or http://armory.neverendless-wow.com/items/arthas/19019 etc then the library will automatically place the appropriate tooltips on these links, you don't need to do anything. See 'Test 1' in the example at the end of this article.
2. Manual mode - if you would like a character or item tooltip on a link that doesn't point to the armory then you may add the following parameters to the <a> element (or in fact any element) to tell the library to apply a tooltip. The data-armory-type parameter can be either "characters" or "items", and the data-armory-id parameter should be either the item ID or the character name. See 'Test 2a' and 'Test 2b' in the example at the end of this article.
3. Custom mode - the library can be used to add completely custom mouse-hover tooltips to any element, similar to the example images in the first paragraph pf this page. This is achieved in a similar manner to the manual tooltips and uses the parameter data-tttitle for the tooltip title (this is optional) and data-tttext for the tooltip text. You may place html in either of these parameters, but be sure to escape characters such as the angled brackets and quotes. PHP's htmlspecialchars function is generally appropriate for this if you are using PHP. See 'Test 3' in the example at the end of this article.


Step 3. (Optional) Apply CSS to Custom Tooltips

The Neverendless websites apply a special dotted-underline to elements which have Custom tooltips, and you may do so as well if you wish though this is completely optional. The following code is used by the Neverendless websites to apply the .tttext_css CSS class to most elements with these tooltips. Please note that this only applies to the 'Custom Tooltips' mentioned above, and not item/character tooltips of any kind.

<script type="text/javascript">
$(document.ready(function(){
$("[data-tttext]").not($("#infoToolTip [data-tttext], #globalToolTip [data-tttext], .miscToolTip [data-tttext], img")).addClass("tttext_css");
});
</script>


The end. You may go enjoy your new tooltips.

Example Code

As promised above, some example code.
The 'Test 1' link demonstrates the automatic application of tooltips to links pointing to the Neverendless Armory.
The 'Test 2a' link demonstrates the manual application of item/character tooltips on links pointing elsewhere.
The 'Test 2b' element demonstrates the manual application of item/character tooltips to non-link elements.
The 'Test 3' element demonstrates the use of custom tooltips.

<html>
<head>
<script type="text/javascript" src="http://static.neverendless-wow.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://static.neverendless-wow.com/js/armory-power.js"></script>
</head>
<body>
<a href="http://armory.neverendless-wow.com/characters/Rickondriuzz">Test 1</a>
<a href="http://www.example.com" data-armory-id="Rickondriuzz" data-armory-type="characters">Test 2a</a>
<span data-armory-id="19019" data-armory-type="items">Test 2b</span>
<a href="http://www.example.com" data-tttitle="Test" data-tttext="This is just a test">Test 3</a>
</body>
</html>

The above HTML will produce a result that looks something like this:
Armory Tooltip Library - Example 1
370x330px 18KiB
Armory Tooltip Library - Example 2a
401x336px 17KiB
Armory Tooltip Library - Example 2b
592x535px 48KiB
Armory Tooltip Library - Example 3
466x252px 15KiB