Adding & Customizing tooltips on any website!

Deleted · 2009-08-18, 09:16 AM

The MMO-Champion Database supports tooltip embedding. And it's VERY easy.

The short version
Add this anywhere on your site (preferably in the <head>):

Code:

<script type="text/javascript" src="http://db.mmo-champion.com/tt.js"></script>

And ... congratulations, you're done! This files pulls all of the necessary CSS and Javascript file for your tooltips to work out of the box. You can now enjoy linking anywhere on your site like this:

http://db.mmo-champion.com/i/12345/bijous-belongings/
http://db.mmo-champion.com/i/Warglaive-of-Azzinoth
http://db.mmo-champion.com/i/ashbringer
http://db.mmo-champion.com/a/not-in-my-house
http://db.mmo-champion.com/c/14834/hakkar/
http://db.mmo-champion.com/s/ruby-pendant-of-fire/
http://db.mmo-champion.com/is/frostfire-regalia

The customizable version
What the tt.js file does is equivalent to this:

Code:

<link type="text/css" rel="stylesheet" href="http://db.mmo-champion.com/static/css/tooltip.css"/>
<script type="text/javascript" src="http://db.mmo-champion.com/static/js....js"></script>
<!--[if IE]><link type="text/css" rel="stylesheet" href="http://db.mmo-champion.com/static/css/tooltip-ie.css"/><![endif]-->

No file is obfuscated, so feel free to copy, modify, revamp, improve, compress, prettify, whatever you want from them.

tooltip.js - contains Sigrie's tooltip library, all the javascript code necessary to pull anddisplay tooltips
tooltip.css - contains all the tooltip styling, split for each kind of tooltip.
wow.css (pulled from tooltip.css) - contains standard WoW classes such as quality, difficulty, sockets, money ...
tooltip-ie.css - contains all the IE-specific styling for tooltips, you might want to remove it

This is the same code used on the MMO-Champion frontpage. It can run fine alongside Wowhead's, but there is additional support for item sets and other various things.

Please forward any bug or suggestion in this thread.

Deleted · 2009-08-18, 09:40 AM

Customizing URLs
--

The URLs supported by the database are split in three, by a slash (multiple slashes get trimmed down to one):
* object type
* key (id, name, slug)
* appendix

The object type can be:
* Achievements: a, ach, achievement
* Items: i, item
* Item sets: is, itemset
* NPCs: c, npc, creature
* Spells: s, spell

Note: There is currently an issue with long object types. Use the short object types, otherwise tooltips will be disabled.

The key can be:
* The object's id
* The exact object name
* The exact object name with underscores getting replaced by spaces
* The exact object slug[1]
* The first part of a slug (eg, "thunderfury", "rhok-delar", etc) - a "-" has to follow where it's cut

The key is always case-insensitive. The parameters are tested in order given until there is at least one hit. If there is more than one hit, the first result from the query is given (always sorted by name, then by id. In case of items, it's sorted by descending quality, then name, then id).

[1] A slug is a lowercased, standard name for an item where any non alphanumeric character gets replaced by a "-", "'s" is replaced by "s" and a dash never following another, with a maximum of 50 characters. "Thunderfury, Blessed Blade of the Windseeker" becomes "thunderfury-blessed-blade-of-the-windseeker"; BRK-1000 becomes "brk-1000".

If using numeric ids, slashes are optional. Otherwise, there must be a slash before the key, and one after if there is an appendix.

The appendix can be:
* "/tooltip", giving exclusively the html tooltip
* "/tooltip/js", giving a javascript version containing the html tooltip
* "/json", giving a JSON-serialized version of the item.
* Anything else is ignored

The appendix always finishes the url, and is purely optional. Only the end of the appendix is tested, so you can insert whatever you want before it (item/12345/foobar/baz/wiz123/json will still give you the json of item #12345).

Examples with appendices:
http://db.mmo-champion.com/i/12345/bijous-belongings/
http://db.mmo-champion.com/i/12345/json
http://db.mmo-champion.com/i12345/bi...qwerty123/json
http://db.mmo-champion.com/i/bijou's_belongings/tooltip

**Vaengence** · 2009-10-02, 06:22 AM

I have attempted to add support for my forum for MMO-Champion tooltips however I cannot get it to work.

You state that it works alongside Wowheads, I assume you mean the individual line of code that wowhead links works with.

The wowhead tooltips I use is a separate mod (much like Itemstats) and is located here for information - http://www.wowhead-tooltips.com/ - and rather than just a single addition to the header file installs the following scripts:

<link href="{T_THEME_PATH}/wowhead.css" rel="stylesheet" type="text/css" />
<script src="http://www.wowhead.com/widgets/power.js" type="text/javascript"></script>
<link href="{T_THEME_PATH}/armory.css" rel="stylesheet" type="text/css" />
<script src="./wowhead/js/armory.js.php" type="text/javascript"></script>

I have attempted to add the single line script for mmo tooltips however posts made with these links will not generate a tooltip.

Is there a conflict occuring between the two? IS there an easy solution to have mmo tooltips up and running as well? There are times when items just arent on wowhead yet.

**tattooedpierre** · 2009-11-16, 06:26 PM

Is there a way to parse an item without using the usual url? ie: can I do something like:

<<myurltag>>http://db.mmo-champion.com/silk-cloth/<</myurltag>>

... or am I looking at this all the wrong way?! Its just it would require you to have the urls for every item you wanted to link before-hand if you needed to have the full path.

In any case, well done, great work

.. look forward to integrating this into my SMF site, too.

**Infinix** · 2009-11-17, 01:06 AM

I've given that single line of code a go and unlike the Wowhead one it doesn't seem to want to work.

It looks as if the tooltip flicks up for a fraction of a second and then disappears without loading properly and not in the part of the screen I was expecting (further away from the mouse cursor).

The browser is IE7 so not sure if this has something to do with it, but I wouldn't have thought so given Wowhead tooltips work like a charm.

**Milamber** · 2009-11-17, 07:05 AM

Does it only work with the whole http bla bla?

**Affe** · 2009-11-18, 03:07 PM

For phpBB3, I found a way to add the script via BBCode tags. This will be useful for anyone who has access to the ACP (admin control panel) but does not have access to the file directory:

BBCode usage:

Code:

[mmoachiev]{TEXT}[/mmoachiev]

HTML Replacement:

Code:

<script type="text/javascript">

var myOldString = "{TEXT}";

var myNewString = myOldString.replace(/&#38;#39;s/g, "s"); //removes '
myNewString = myNewString.replace(/&#38;#39;/g, "-"); //replaces ' with -
myNewString = myNewString.replace(/ /g, "-"); //replaces space with -
myNewString = myNewString.replace(/,/g, ""); //removes ,
myNewString = myNewString.replace(/&#38;#40;/g, ""); //removes (
myNewString = myNewString.replace(/&#38;#41;/g, ""); //removes )

if (myNewString.length > 50)
{
  myNewString = myNewString.substr(0, 50);
}

var lnk = "<a href=http://mmo-champion.com target='_blank' title='mmo-champion.com'><img src='http://www.mmo-champion.com/favicon.ico'></a><a href=http://db.mmo-champion.com/a/" + myNewString + " target='_blank'>" + myOldString + "</a>";

document.write(lnk);

if (typeof(mmotip) == "undefined")
{
var mmotip = "http://db.mmo-champion.com/tt.js";
//if Internet Explorer:
if (document.all)
{
	var lnk = '<script src="'+ mmotip + '" type="text/JavaScript"><\/script>';
  document.write(lnk);
}
//if Not Internet Explorer:
else
{
var th = document.getElementsByTagName("body")[0];
var s = document.createElement('script');
s.type = "text/javascript";
s.src = mmotip;
th.appendChild(s);
}
}
</script>

I'm trying to find a way to automatically detect whether a linked item is an achievement, item, spell, etc. without having to make separate BBCode tags for each. If anyone can help with this, it would be appreciated.

**Nagios** · 2009-11-18, 05:43 PM

Thanks for the PHPbb code

It does work great in Firefox, although when it is used in IE it only loads the first item linked, and does not allow tool tips. It also blanks out the rest of the page and throws up script errors. Has anyone else noticed this?

**Kendaus** · 2009-11-18, 07:24 PM

I don't know enough about Java Code to be able to figure this out on my own... well not in a hurry anyways... but I believe the problem, and possibly the answer lies in the following:

http://support.microsoft.com/kb/927917

http://www.dynamicdrive.com/forums/blog.php?b=30

**Affe** · 2009-11-19, 03:38 PM

There were a couple errors with the code I had listed before.
1) Quotation marks weren't handled properly (due to 's being just "s" in the database, and other quotation marks are replaced by dashes "-")
2) Maximum string length is 50 characters, so some achievements (such as "I Love the Smell of Saronite in the Morning (25 player)") need to be truncated.
3) Kendaus is correct on the Internet Explorer Issue. This has also been fixed.

Code:

<script type="text/javascript">

var myOldString = "{TEXT}";

var myNewString = myOldString.replace(/&#38;#39;s/g, "s"); //removes '
myNewString = myNewString.replace(/&#38;#39;/g, "-"); //replaces ' with -
myNewString = myNewString.replace(/ /g, "-"); //replaces space with -
myNewString = myNewString.replace(/,/g, ""); //removes ,
myNewString = myNewString.replace(/&#38;#40;/g, ""); //removes (
myNewString = myNewString.replace(/&#38;#41;/g, ""); //removes )

if (myNewString.length > 50)
{
myNewString = myNewString.substr(0, 50);
}

var lnk = "<a href=http://mmo-champion.com target='_blank' title='mmo-champion.com'><img src='http://www.mmo-champion.com/favicon.ico'></a><a href=http://db.mmo-champion.com/a/" + myNewString + " target='_blank'>" + myOldString + "</a>";

document.write(lnk);

if (typeof(mmotip) == "undefined")
{
var mmotip = "http://db.mmo-champion.com/tt.js";
//if Internet Explorer:
if (document.all)
{
var lnk = '<script src="' + mmotip + '" type="text/JavaScript"><\/script>';
document.write(lnk);
}
//if Not Internet Explorer:
else
{
var th = document.getElementsByTagName("body")[0];
var s = document.createElement('script');
s.type = "text/javascript";
s.src = mmotip;
th.appendChild(s);
}
}
</script>

**Kendaus** · 2009-11-19, 05:20 PM

Hey Thanks a MILLION for taking a look at this! ;D

**Nagios** · 2009-11-19, 06:12 PM

Yay this works perfectly! As Ken said Thanks a MILLION!

Your work on this is much appreciated.

**Infinix** · 2009-11-19, 10:21 PM

Originally Posted by Affe

I'm trying to find a way to automatically detect whether a linked item is an achievement, item, spell, etc. without having to make separate BBCode tags for each. If anyone can help with this, it would be appreciated.

I'm not sure if you can do an auto detect, but I did make a modification so that people can input this themselves when linking the item by adding another variable to the BBcode. It mainly just requires that people know which one to use.

s = Spell
i = Item
a = achievement

So my example using the code pasted below, the forum user would put in:
[mmoChamp=i]Shadowmourne[/mmoChamp]
...which would obviously link Shadowmourne. Or,
[mmoChamp=a]Hot Pocket[/mmoChamp]
...which would link an achievement, etc etc..

BBCode usage:

Code:

[mmoChamp={SIMPLETEXT}]{TEXT}[/mmoChamp]

HTML Replacement:

Code:

<script type="text/javascript">

var myOldString = "{TEXT}";
var myLinkUp = "{SIMPLETEXT}";

var myNewString = myOldString.replace(/&#38;#39;s/g, "s"); //removes '
myNewString = myNewString.replace(/&#38;#39;/g, "-"); //replaces ' with -
myNewString = myNewString.replace(/ /g, "-"); //replaces space with -
myNewString = myNewString.replace(/,/g, ""); //removes ,
myNewString = myNewString.replace(/&#38;#40;/g, ""); //removes (
myNewString = myNewString.replace(/&#38;#41;/g, ""); //removes )

if (myNewString.length > 50)
{
myNewString = myNewString.substr(0, 50);
}

var lnk = "<a href=http://mmo-champion.com target='_blank' title='mmo-champion.com'><img src='http://www.mmo-champion.com/favicon.ico'></a><a href=http://db.mmo-champion.com/" + myLinkUp + "/" + myNewString + " target='_blank'>" + myOldString + "</a>";

document.write(lnk);

if (typeof(mmotip) == "undefined")
{
var mmotip = "http://db.mmo-champion.com/tt.js";
//if Internet Explorer:
if (document.all)
{
var lnk = '<script src="' + mmotip + '" type="text/JavaScript"><\/script>';
document.write(lnk);
}
//if Not Internet Explorer:
else
{
var th = document.getElementsByTagName("body")[0];
var s = document.createElement('script');
s.type = "text/javascript";
s.src = mmotip;
th.appendChild(s);
}
}
</script>

**chuanhsing** · 2009-11-22, 01:20 PM

Don't work for IE8.

Code:

<html>
<head>
<script type="text/javascript" src="http://db.mmo-champion.com/tt.js"></script>
</head>
<body>
<p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>
<a href="http://db.mmo-champion.com/i/12345/b...elongings/</a>
</body>
</html>

**Affe** · 2009-11-30, 08:51 PM

Originally Posted by chuanhsing

Don't work for IE8.

Code:

<html>
<head>
<script type="text/javascript" src="http://db.mmo-champion.com/tt.js"></script>
</head>
<body>
<p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p>
<a href="http://db.mmo-champion.com/i/12345/b...elongings/</a>
</body>
</html>

You are correct in which that html will not work correctly in IE8. However, it is trying to work (once in a while you'll notice a blip appear that has the tooltip content in it). I don't know why your specific code isn't working, but I can assure you that it does indeed work in IE8 (I tested it on my site in IE8, you can find the link here.

**BaddyMcBad** · 2009-11-30, 10:44 PM

I've got it working but does anyone know of a way I can make the item link according to quality on my Blogspot?

Edit: By adding on the WoWHead script I can do colors and everything currently in-game will default to Wowhead it seems, and whatever is not in-game will be linked by MMO-Champ.

**Kendaus** · 2009-12-02, 07:15 PM

PHPBB Question/Request:

I'm having a bit of a problem linking the correct spell from MMO...

Basically, 2nd boss in ICC has a spell called Frostbolt which is the same name as the spell used by mages. The MMO DB ID for the spell I want is 72007

When I use:

Code:

[MMOSpell]72007[/MMOSpell]

I get the correct Frostbolt (The Ability of the Boss)

However when I use:

Code:

[MMOSpell]Frostbolt[/MMOSpell]

I get the Mage Spell

The 2 spells have the same name but different DB ID's. Is there any way to link just the DB entry and have it fill in the proper spell name?

Something like [MMO]72007[/MMO] or [MMO=72007]TEXT[/MMO] perhaps?

BTW the PHPBB code works GREAT! ;D

Deleted · 2009-12-02, 07:33 PM

Originally Posted by Kendaus

PHPBB Question/Request:

I'm having a bit of a problem linking the correct spell from MMO...

Basically, 2nd boss in ICC has a spell called Frostbolt which is the same name as the spell used by mages. The MMO DB ID for the spell I want is 72007

When I use:

Code:

[MMOSpell]72007[/MMOSpell]

I get the correct Frostbolt (The Ability of the Boss)

However when I use:

Code:

[MMOSpell]Frostbolt[/MMOSpell]

I get the Mage Spell

The 2 spells have the same name but different DB ID's. Is there any way to link just the DB entry and have it fill in the proper spell name?

Something like [MMO]72007[/MMO] or [MMO=72007]TEXT[/MMO] perhaps?

BTW the PHPBB code works GREAT! ;D

I've no experience with recent versions of phpBB I'm afraid. But this should be very easy to do, cf post #2 about links.

**Affe** · 2009-12-14, 09:01 PM

Funny that someone had problems with this just as I had come up with a solution

I edited my original code because I noticed that it was having problems when wanting to specify a version of an item or spell. So I added this in:

BBCode Usage:

Code:

[mmoitem]{TEXT}[/mmoitem]

HTML Replacement:

Code:

<script type="text/javascript">
var a = -1;
var b = -1;
var itemnum = null;
var itemname = null;
var str = null;
var myNewString = null;

var myOldString = "{TEXT}";

str = myOldString;

a = str.indexOf("{");
if (a != -1)
{
b = str.indexOf("}");

itemnum = str.substr((a + 1), (b - a - 1));
itemname = str.substr(0, (a));

if (itemname.substr(itemname.length - 1, itemname.length) == " ")
{
itemname = itemname.substr(0, (itemname.length - 1));
}
}
else
{
itemname = myOldString;
}

myNewString = itemname.replace(/&#38;#39;s/g, "s"); //removes '
myNewString = myNewString.replace(/&#38;#39;/g, "-"); //replaces ' with -
myNewString = myNewString.replace(/ /g, "-"); //replaces space with -
myNewString = myNewString.replace(/,/g, ""); //removes ,
myNewString = myNewString.replace(/&#38;#40;/g, ""); //removes (
myNewString = myNewString.replace(/&#38;#41;/g, ""); //removes )

if (myNewString.length > 50)
{
  myNewString = myNewString.substr(0, 50);
}

if (itemnum == null)
{
var lnk = "<a href=http://mmo-champion.com target='_blank' title='mmo-champion.com'><img src='http://www.mmo-champion.com/favicon.ico'></a><a href=http://db.mmo-champion.com/i/" + myNewString + " target='_blank'>" + myOldString + "</a>";
}
else
{
var lnk = "<a href=http://mmo-champion.com target='_blank' title='mmo-champion.com'><img src='http://www.mmo-champion.com/favicon.ico'></a><a href=http://db.mmo-champion.com/i/" + itemnum + "/" + myNewString + " target='_blank'>" + itemname + "</a>";
}

document.write(lnk);

if (typeof(mmotip) == "undefined")
{
var mmotip = "http://db.mmo-champion.com/tt.js";
//if Internet Explorer:
if (document.all)
{
var lnk = '<script src="'+ mmotip + '" type="text/JavaScript"><\/script>';
document.write(lnk);
}
//if Not Internet Explorer:
else
{
var th = document.getElementsByTagName("body")[0];
var s = document.createElement('script');
s.type = "text/javascript";
s.src = mmotip;
th.appendChild(s);
}
}
</script>

What this basically allows is specifying an item number. Please note that I have my website set to allow people to select the difference between items/spells/quest/achievs/etc. by using different tags (so the code above is for items only). So, when [mmoitem]Perdition[/mmoitem] will automatically result in the heroic version of Perdition, now users can enter [mmoitem]Perdition {47900}[/mmoitem] to specify the lower version of the item.

**Nagios** · 2009-12-14, 10:04 PM

You sir are amazing! Thank so SOO much for working on this for everyone!

/hug <3

Recent Blue Posts

Recent Forum Posts

Thread: Adding & Customizing tooltips on any website!

Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Re: Adding & Customizing tooltips on any website!

Posting Permissions

Social Media

Services

Resources

Our Communities

MOBAFire Network