This site makes extensive use of JavaScript.
Please enable JavaScript in your browser.
Live
PTR
11.0.7
PTR
11.0.5
Powered Tooltips Guide
Post Reply
Return to board index
Post by
Miyari
Have a guild site? Blog? Personal website? Page on Geocities with pictures of your cat?
By the power of Wowhead...
We are pleased to announce a new, easier than ever way that users can implement Wowhead mouseover tooltips to item links within their pages! :)
Please be sure to follow all of the steps on this page very carefully:
http://www.wowhead.com/tooltips
If you have any questions or comments please feel free to reply. :)
Links
Implementation guides by users:
vBulletin
phpBB:
2.x.x
-
2.x.x Mod Version
|
3.0
by craCkpot -
3.0
by marcimi -
3.0 Mod Version
Simple Machines Forum (SMF)
(
Mod Version
)
Invision Power Board (IPB)
WordPress Blog
(
Plugin Version
)
PHP Nuke-Evolution
MyBB
TikiWiki
YaBB
Drupal
PunBB
Dojo
Post by
Skosiris
This does not appear to be compatible with BBCode - is there a workaround?
As long as you can use BBCode (most likely the \ tag) to produce a link that points to a
www.wowhead.com/?item=12345
page, the link in question should get a tooltip on mouseover.
Post by
20820
This is awesome. Excellent work!
Thinking about adding that into the wowhead forums to give a roll over in our posts?
Very probably adding item links on forums/comments soonish. :)
Post by
Lukian
Power your browser with wowhead tooltips over *any* item link! :)
Currently supports: Armory (US & EU) / Wowhead / Thottbot / Allakhazam
Designed for:
Opera
's userjs
(NOTE: Only tested in Opera, untested in Mozilla's
Greasemonkey
)
hint: to make it work on the forums, change the wowhead exclude to: http://*wowhead.com/?item* and add http://*wowhead.com/?search*
Version which redirects all links to wowhead *whistles innocently*:
http://pastebin.com/f6b616f8f
Includes support for thottbot search links, such as used on the bottom of Petopia pages.
Example:
Princess on Petopia
Post by
asciident
It seems if you can do \
Bijou's Belongings\
it works just fine. The problem I have now is that I can't specify a color because BBCode doesn't know what to do with class="qX" (where X is the item quality number). It also has problems with BBCode color specifiers like \
Bijou's Belongings\
.
(Used *s to escape Wowhead's parsing of BBCode...)
Edit by Skosiris:
You can use a backslash to escape a tag.
Post by
hezec
To those who have added this code to their forums. Which template file to I add it to?
Depends entirely on what forum system you use, but most likely some that contains the layout for showing a thread and the messages in it, as that's where these would most likely be used. Or then just add it to all html/php files you can find, it's only a single line.
Post by
85644
This post was from a user who has deleted their account.
Post by
TheOnyx
So I was able to get the tooltip to actually show up but it looks very strange.
http://incite-guild.org/forum/images/stavmar/Wowhead1.jpg
It is like the materials list to make this particular pattern are too long and it results in this particular error.
Any ideas?
I am using the code on an excel spreadsheet with that I use to track DKP. The spreadsheet is saved as a web page and i went in and added the script command above:
<script src="
http://www.wowhead.com/widgets/power.js"
type="text/javascript"></script>
And used the following code for the tooltip entry:
<a href="
http://www.wowhead.com/?item=30301"
class="q4">Pattern:Belt of Natural Power</a>
The full line viewing form Excels web page html reads like this.
<td class=xl192><a href="
http://www.wowhead.com/?item=30301"
class="q4">Pattern:Blet of Natural Power</a></td>
We have this working properly on our end. Something about your pages is clashing with the script.
The CSS that the JavaScript uses is coded to ensure that it only styles the tooltip. However, depending on the CSS you already have at your site, it could be trying to style elements of the tooltip in such a way that it modifies the appearance.
As a test, try removing the CSS temporarily from your site (or create a test page without any CSS) and see if the problem persists.
Post by
tecnobrat
I added this line in the viewtopic.php, and works fine
So I added the line to my PhP viewtopic.php file and I am getting an error.
Parse error: parse error, unexpected '<' in /home/inciteg1/public_html/forum/viewtopic.php
Does this mean i cannot use java scripts on my PhP Forums or does this mean something else, I have just copied and pasted the script line and the error generates no matter which post I go to within the forums.
Are there any suggestions out there!
Stav
You actually want to put the script in your template files. The default template is called subSilver, so this is the path:
templates/subSilver/overall_header.tpl
If you use a custom template, simply change "subSilver" to the name of your template.
Also you will note that I gave you the template file for the overall_header file. This is a global template file so it will allow tooltips on every single page within your forums.
Post by
marcimi
Oh dudes, what a wonderfull tool. I've implemented it in my guilds message board and it works great.
I have found an issue. The tooltip will not show up if I use the following BBCode in my (vbulletin) message board:
\
\
My Item\
\
Note the \
and the \
Tag's which transforms the whole link into the following HTML:
<a href="
http://www.wowhead.com/?item=23631"
target="_blank"><b>My Item</b></a>
With this HTML-Output, your provided script doesn't work. It would be great if you can fix this.
Nevertheless thanks for this great feature. Now go on and translate all tooltips into french and german for my guild mates :)
Try moving the bold tags outside of the url tags and it should work.
Oh, thats so easy oO. It's to late for me to switch on my brain to solve this "problem" on my own.
Suggestion: What about making this script avaiable for Spells too? I could use this in my class-guides and boss-guides I'm writing for my guild.
Post by
deef
For the people having problems placing the "<script src="
http://www.wowhead.com/widgets/power.js"
type="text/javascript"></script>" bit on your forums, here is what I did.
Go to the "Administration Control Panel" of your forums and browse to "Edit Template", should be somewhere around "Style" on most boards. This way you can place the script right inside the "<head></head>" without messing up the PHP code.
And thanks for this, works like a charm. :)
Post by
marcimi
Because some friendly guilds asked me how they can make wowhead-tooltips avaiable in their message-boards and some user's asking on the wowhead-forums the same questions I wrote up this litte step-by-step workout.
This is how you can install the wowhead-tooltips on your vBulletin-Board including the creation of a brand-new vbCode-Tag.
You don't need Acces to the files nor a FTP-Acces to your message-board. Just an account with admin-rights to edit Styles & Templates aswell as creating new vbCodes.
I'm working on a step-by-step guide for phpBB-Board's too, just wait a few moments.
The version of the vbulletin I used is 3.6.6. The language on my message board is german. I tried to translate all necessary terms into english. It can differs from the english one, but I think there shouldn't be any problems to understand what I mean.
Part One - Installing the Script
Log in into your Administrator-Controll-Center
Expand the category
Styles & Templates
, then hit
Manage Styles
If you provide more than one style to your board-members, you have to do the following steps for each style you provide.
In the dropdown-menu next to your current active style (in this example, I'll use the vB-Standard-Style with the name
Standard-Style
) select
Global templates
(and hit
Go
if your browser isn't redirecting you).
Now you see 3 big Input-Boxes. Go into the box that belongs to
headinclude
.
Search for: <link rel="alternate" type="application/rss+xml" title="$vboptions - $foruminfo - RSS Feed" href="external.php?type=RSS2&forumids=$foruminfo" />
</if>
</if>
This can differ depending on the style you use. If you cannot find this code, just go to the end of the
headinclude
Inputbox and continue with the next step.
After that, paste the following:
<script src="
http://www.wowhead.com/widgets/power.js"
type="text/javascript"></script>
Hit
Save
WoWHead-like Item-Tooltips should now work. Just try it with the following vbCode everywhere on your message-board:
\
My Item\
Now let's create an own WoWHead.com-vBcode :)
Part Two - Creating the vbCode
Log in into your Administrator-Controll-Center
Expand the category
Own vbCodes
, then hit
Add own vbCode
Fill in the form with the following data:
Title:
WoWHead.com MouseoverTooltip
Tag:
item
Inserted code:
<a href="
http://www.wowhead.com/?item=
{option}">{param}</a>
Example:
Bijou's Belongings
My Item
Description:
Write whatever describes this vbCode or just use my text:
This vbCode creates an wowhead.com-Link which provide sweet item-tooltips of the linked item. Only works if the wowhead.com script is active.
Use {option}:
Yes
Editor-Button-Image:
Ths is optional. You can enter an URL to an 21 x 20 pixel sized image. It will be used in the WYSIWYG-Editor as a vbCode-Button.
Looking for a 21x20px wowhead-rocket :)
Hit
Save
Congratulations! You're done installing the WoWHead-MouseOver-Script into your vbulletin messageboard.
Now you should go whereever you want in you message board and post a thread that contains the following (or just edit an existing one):
Bijou's Belongings
My Item
A (german) working example can be found
here
.
Points I work on:
phpBB Installtion-Guide
Support for quality-colors (I'm following an idea)
Create a small icon to use as a button in the WYSIWYG-Editor
If requested, I'll take a closer look into eqdkp and try to find out how to implement wowhead-tooltips.
I hope this will help.
Best regards,
Marc
Addition:
Is there anyone that can simplify this step for me?
Yes, I'm installing SMF and I'll write a step-by-step guide. Just wait a few moments.
Post by
marcimi
Ok dudes, here it comes. Two more step-by-step guides about how to implement the wowhead-mouseover-tooltip to your message board.
Let's start with phpbb. The second part of my post will cover how to install the script on Simple Machine Forums (SMF).
Ok, let's go!
phpBB
I used the newest phpbb-version 3.0.RC7.
Part One - Installing the script
Log in to your Admin-Control-Center
Hit
Styles
in the menu
On the left side hit
Templates
Search for your current active style and under
Options
click
Edit
(This example uses the
proSilver
Style, which is deliverd with the new phpbb version 3).
Select
overall_header.html
(and click
Select template file
if your browser isn't redirecting you)
In the text-inputbox search for:
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
</head>
Edit this part. After that it should look like this:
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
<!-- WoWHead Mouseover-Tooltips -->
<script src="
http://www.wowhead.com/widgets/power.js"
type="text/javascript"></script>
<!-- /WoWHead Mouseover-Tooltips -->
</head>
Hit
Submit
WoWHead Mouseover-Tooltips should work now. Go to your forum and start a new thread and test the script with the following BBCode:
\
My Item\
If everything works, let's go over to the BBCode-Creation.
Part Two - Creating the BBCode
Log in to your Admin-Control-Center
Hit
Posting
in the menu
On the left side, select
BBCodes
in the
Message
category
Click
Add new BBCode
Fill in the form with the following:
Without quality colors
BBCode Usage:
{TEXT}
HTML-Replacement:
<a href="
http://www.wowhead.com/?item=
{NUMBER}">{TEXT}</a>
Help line:
This vbCode creates an wowhead.com-Link which provide sweet item-tooltips of the linked item. Only works if the wowhead.com script is active.
Display on posting page:
Mark as selected.
With quality colors
BBCode Usage:
{TEXT}
HTML-Replacement:
<a class="q{IDENTIFIER}" href="
http://www.wowhead.com/?item=
{NUMBER}">{TEXT}</a>
Help line:
This vbCode creates an wowhead.com-Link which provide sweet item-tooltips of the linked item. Only works if the wowhead.com script is active.
Display on posting page:
Mark as selected.
Hit
Submit
Congratulations, your done!
Go to your message board and test the new BBCode. You can use the following BBcode for testing:
Blessed Qiraji Augur Staff
A great Item
Blessed Qiraji Augur Staff
Something epic
Have fun!
Post by
Kalroth
Great work on the phpBB version. I'm just wondering about 1 thing, how do I edit the BBcode in phpBB 2.x.x version? Cause my guild website is currently using that. I've tried editting the bbcode.php file but I'm not sure on how to edit it.
This is what I did for my site:
STEP ONE
Edit /forum/templates/YourOwnTemplate/overall_header.tpl as described by marcimi.
Basically just insert below code before the "</head>" tag.
<!-- WoWHead Mouseover-Tooltips -->
<script src="
http://www.wowhead.com/widgets/power.js"
type="text/javascript"></script>
<!-- /WoWHead Mouseover-Tooltips -->
STEP TWO
Open /forum/templates/YourOwnTemplate/bbcode.tpl
Add this in the bottom of the file:
<!-- BEGIN item --><a href="
http://www.wowhead.com/?item=
{NUMBER}">{DESCRIPTION}</a><!-- END item -->
STEP THREE
Open /forum/includes/bbcode.php
* Find this line:
$bbcode_tpl = str_replace('{EMAIL}', '\\1', $bbcode_tpl);
and insert these lines after it:
$bbcode_tpl = str_replace('{NUMBER}', '\\1', $bbcode_tpl);
$bbcode_tpl = str_replace('{DESCRIPTION}', '\\2', $bbcode_tpl);
* Find this line:
$replacements;
and insert these lines after it:
// text
$patterns+)\](.*?)\#is";
$replacements;
DONE!
That should do it for PHPBB 2.0.12.
Post by
Kalroth
While this is a very interesting development, I would currently not switch my phpbb forum from Itemstats to these direct Wowhead links, purely for one reason: they require the item-id.
What happens when your users try to do this:
Warglaive of Azzinoth
Berserker Bracers
Anyways the javascript files would have to be changed to avoid using the itemid, but it's not as easy as it sounds, since it has to look the name up and still support itemid in cases where there's multiple items with the same name.
Post by
marcimi
T_T is there anyway to put into IPB?
Because IPB isn't freeware I do not have legal access to it. I asked some delevoper-friends but nobody has a working test-environment of IPB installed.
I've tried to get an online demo of IPB but demo-queue is full at the moment.
And I don't know if I need FTP-Acces to the IPB files to implement wowhead-tooltips. If yes, the online demo isn't usefull for me.
Sorry for that :/
Thanks! This is very useful, make us some more :-)
Which one? Please note that I do not have access to all commercial systems. I only own a vbulletin-license.
But I can take a look to everything which is freeware. Just gimme a name :)
While this is a very interesting development, I would currently not switch my phpbb forum from Itemstats to these direct Wowhead links, purely for one reason: they require the item-id.
There are a few ways to get the ItemID of items. You can use the armory or wowhead.com (even thottbot and this alhakazam-thingy should work). You can find the ItemID in the URL.
Additionally you can use
RatingBuster
, a small WoWAce-Addon which displays the ItemID of an item on the bottom of their tooltip.
With the wowhead-tooltips you can rename your links. Your user doesn't have to use the orginal item-name. Ok, it isn't really helpfull, but it's funny. For example you can make something like this:
Warglaive of Azzinoth
One part of a damn cool sword!
(This will show the tooltip of one of the Warglaive's.
Great work on the phpBB version. I'm just wondering about 1 thing, how do I edit the BBcode in phpBB 2.x.x version? Cause my guild website is currently using that. I've tried editting the bbcode.php file but I'm not sure on how to edit it.
This is what I did for my site:
*cut*
Thanks Kalroth for your addition!
Greetings,
Marc
Post by
marcimi
I splitted up my post. Now you can find the SMF-Guide here:
Simple Machines Forum (SMF)
I used the newest smf-version 1.1.4.
Part One - Installing the script
Ok, now the difficult part. SMF does not provide a function to edit templates without having access to the files via FTP. If you want to add WoWHead-Mouseover Tooltips to SMF Forums, make shure you have the following:
Access to the Administration-Center
Access to the files located on the webserver (you need FTP-Login informations)
Start you FTP Client
Connect to your webserver
Locate and download the following file:smf/Themes/default/index.template.php
Again: I'm using the default theme. If you use another theme, you have to download the corespondig index.template.php of your theme.
Open the file and search for:
// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"'
, $context ? ' dir="rtl"' : '', '><head>
After that, include:
<!-- WoWHead MouseOver-Tooltip -->
<script src="
http://www.wowhead.com/widgets/power.js"
type="text/javascript"></script>
<!-- /WoWHead MouseOver-Tooltip -->
Save the file. Don't change the name.
Upload the file to your themes directory.
(In my example: smf/Themes/default/index.template.php)
Reload your Forum-Home and check the source-code. If you see the <script>-Tags with the wowhead-script you have done everything correct.
Now it's time to test it. Make some URL-Tags with wowhead.com-Item-Links.
For example:
\
My Item\
Part Two - Installing required modifications
You need to install severall modifications to create custom BBCodes.
Let's start with Custom BBCode
Download the mod
Custom BBCode
and save it on your hard drive
Log on to the Administration-Center
Click on
Packages
on the left menu. You can find
Packages
in the
Main
category.
Click
Download Packages
Scroll down to
Upload a package
Click
Browse
and select the downloaded package (zip) on your hard drive
Click
Upload
Click
Apply Package
Now the SMF-Administration-Center needs your FTP-Information. Fill in the form (make sure you overwritve "localhost" with the adress of your FTP Server e.g. forum.domain.com).
Click
Install now
Everything went well if you see the following text (or something semilar):
The package was installed successfully. You should now be able to use whatever functionality it adds or changes; or not be able to use functionality it removes.
Nothing to test here :)
Part Three - Create the custom BBCode
Log on to the Administration-Center
Click
Features and Options
on the left menu. You can find
Features and Options
in the
Configuration
category.
Click
Custom BBC
in the sub-menu
Click
Create a new Tag
Fill in the form:
Tag Name:
item
Description:
This vbCode creates an wowhead.com-Link which provide sweet item-tooltips of the linked item. Only works if the wowhead.com script is active.
Tag type:
Select content
Parse enclosed BBCode:
Select
content only
Trim whitespace
: Both
The HTML used for the tag:
<a href="
http://www.wowhead.com/?item=
{option}">{content}</a>
Hit
Save
Check the checkbox under
Enable
and hit
Save
again
Done!
Try the following new BBCode:
Plans: Thick Obsidian Breastplate
A great Item
I hope this will help you installing the MouseOver-Tooltip to your message boards. If you have any further question: Post it!(##RESPBREAK##)16##DELIM##Gontier##DELIM##
Post by
Roath
Great script :)
I am currently working on a php function that parses item name into the correct link by looking at the xml file (
http://www.wowhead.com/?item=Atiesh
,+Greatstaff+of+the+Guardian&xml), it is working as it is right now, but i am still very new to php, so my code is far from good, you could compare it to cardboard and ducttape :P
Anyway, the function only needs the name between the two tags, capitalization doesn't matter as it makes it all lowercase to eleminate anything there. please keep in mind that only the xml part works as an adress to look at with the item name, if you want the item link, it has to be the ID of the item. The function looks at the xml and gets the following information:
Name (so that its capitalized correctly)
Quality (yup, it makes sure the link has the right color too, using the class="q5" method)
Item ID
it then puts it all together and adds the brackets around the link, and replaces the whole bla bla with a correct, working, itemlink.
If any of you have great knowledge of php, ill gladly welcome you to look at my code, as i know its messy like hell (not to mention im proberly doing it the hardest way possible).
you can have a look at it here:
http://dion.wi10.ots.dk/test/
(just push the button for the output to be parsed, ignore the errors).
As you can see i've also worked on other bbcode parsing, meerely for the fun of it.
Post by
Roath
for some reason pastebin wont work for me, will post code in a sec (will link it in this post)
EDIT
Was able to get pastebin to work, the code can be found here:
http://roath.pastebin.com/f30b537f6
all the function needs is the text that contains the tags and it will fix it, however i made it so that it will only replace itemlinks that are also closed, any open tags will be left as-is. Same thing goes for items that does not exist.
You are most welcome to use pastebin to post any suggested/recommended changes to the code as i know its messy.
Post by
Roath
Request:
Could you make the script (the javascript) fix it so that the links does not break when they are at the end of a line, but instead skips to next line. I tried making my php script wrap them into a span which had white-space:nowrap; it did fix the breaking of the link on 2 lines, however now the links would just continue on the line instead of jumping down to the next line, making it go outside the area it should be contained within.
Post Reply
You are not logged in. Please
log in
to post a reply or
register
if you don't already have an account.
