Update 7 Jan 2009: a newer version of this code using Wowhead is now available.
World of Warcraft uses a floating tooltip to display detailed information about items and armor. The convention and style is duplicated on many websites, including the Warcraft website itself. I’ve wanted tooltips on the Apocalypse site, but there were several criteria that needed to be met:
- Some form of data mining had to be implemented.
- The data had to be available to hand-written pages, dynamic pages, MediaWiki, and phpBB.
- It had to be nifty.
Mining for Tooltips
Most WoW veterans are familiar with Thottbot. The Thottbot addon uploads in-game data to a third-party server, giving players a searchable database of items, recipes, bosses, quests, and just about everything else in the game. The item pages are modeled around the Warcraft tooltip style. This information is about as comprehensive as it gets, so that means the hard part is done: data has already made it out of Warcraft, and is just waiting for a script to pick it up.
Using a combination of the Curl library (for fetching web pages) and the Document Object Model methods (for parsing XML and HTML files), a Thottbot page can be dissected and the “tooltip” extracted. This data can then be stored in a local database to lessen the load on external servers.
Show what you Know
It turns out the World of Warcraft website uses tooltip functions from the folks over at Dynamic Drive. All that’s left is to populate the tooltip with cached data from Thottbot. We have the tooltips in our database, but MediaWiki and phpBB don’t have access. So, Ajax enters from stage right.
Ajax lets us offload the tooltip functionality, making some way to hook into JavaScript events the only prerequisite. Through the Yahoo! UI library we can abstract our database SELECT, making the data available through an HTTP request. JavaScript lets us rewrite parts of our document on the fly, enabling us to update the tooltip for the current item and moving the tooltip to follow the cursor.
Through Ajax, large item tables become relatively painless. A custom MediaWiki plugin can create new wiki tags, such as the <thottbot> tag used in the previous example:
*<thottbot rarity="legendary">Bindings of the Windseeker</thottbot> Keridwen
*<thottbot rarity="epic">Arcanist Bindings</thottbot> Jackstroud
*<thottbot rarity="epic">Felheart Belt</thottbot> Osynling
*<thottbot rarity="epic">Felheart Shoulder Pads</thottbot> DakkotaThe whole process becomes seamless. An author creates a link. A reader mouses over the link, generating an XMLHttpRequest to fill the tooltip. The request causes a PHP script to consult the local database. If the data has not been cached, Thottbot is parsed. The final data is returned as a block of HTML, which is then inserted into the tooltip. Data is cached in a local JavaScript variable, preventing futher Ajax connection requests for the same item on the same page.
Easy.
I actually did almost the exact same thing for one of our products at work. Basically, we have drug databases and lots of content that references drugs. Normally, these drugs are links to pages with more information, but a lot of times, you just want a quick summary of the drug.
My method is almost exactly like yours, except I pull raw xml and parse it using xsl. (and I’m using java instead of php).
Since the same drugs are referenced multiple time on the same page, I store the data in a hash so I only need to do the Ajax request once per drug.
It was pretty easy to accomplish and my co-woker ran up to me and told me how cool it was when she first saw it.
Hrmm, I’ve been pondering getting back into WoW. I haven’t played since May.
Thanks for explaining this, I was looking for the same thing for my guild’s site. I was able to set it up in a day. Now I’m going to work on a tool for our forum to [link] items. I’m really glad Thott allows this too.
Thanks again!
http://www.sustainablelegion.com/items
Since I live in the world of ignorance and didn’t understand much of your post besides the conclusion I made.. “It works”.
Any chance of a script package or something like that to get me started? I’m a complete novice with coding and the likes and something ready to go would be bliss.
gee thanks for just deleting my post.. very helpful.
macaon,
My filters held your posts for moderation, which is why they were not displaying. With regards to your original question, the code consists of several very tightly-knit elements, some of which would be hard to migrate out of my setup. That said, feel free to check out the thott-items.php script for downloading item data from Thottbot. That along with my JavaScript files (check the HTML head of any page on the guild website) should get you pretty far.
Understood. Thanks for the reply despite my rude followup post. My apologies. I’ll see if I can make heads or tails out of this. =)
ok ok. this is awesome! although i have no idea how to make it work. i checked the source from the provided links but i could not make sense out of the javascript files, what i need to include in my html pages, how to find those includes, etc. think that you might be able to help out someone as clueless as myself? where do i start to get this working on my site?
Hi Adam,
I tried to have the same setup as you and the others but the problem I’m running into is I got:
Parse error: parse error, unexpected T_OBJECT_OPERATOR in http://…/includes/thott-item.php on line 52
This is what happen when I tried to do this:
http://…/includes/thott-item.php?i=Iron+Bar
Thanks,
Syzygy
Did you linked to the wrong thott-items.php?
I’ve worked with Syzygy a bit to reference the above problem. This was a case of not using PHP5 and its updated DOM parser, I believe.
Hey Adam,
I’ve been going through all the code here, but I still cannot figure out how you hit the Thott database and pull useful information out to throw it into the tooltip. I’ve been looking at the thott-items.php that you posted above, but I must be missing something.
Anyhow, I appreciate the work you’ve put into this and made public.
Thanks in advance!
Franco
The thott-items.php script will perform an HTTP fetch to read a page from Thottbot.com. It then parses that page source to find the item information table, and that table is saved in the database as HTML.
You then need a second bit of code to pull the “tooltip” back out of the database and display it on your page in some form or another.
Does this help?
Ah yes, that makes alot more sense. Thanks for your help!
-Franco
Are you available to help others with this process? I have copied the info down from the other scripts from your header info but am still lost as to the process of pulling the info from Thott.
Thank you very much for this information. Been looking for something to do this, but apparently have been looking in the wrong areas. Thanks again!
It would be nice to see the actual page that ties all those files togeather. I do php programming and all but I just dont see how to get it all to work.
Thank you in advance.