I noticed some very cool item tooltips on wowwiki, so I'm wondering if I can use something like that on my wiki.

// See [[Help:Tooltips]]
// default setting to turn tooltips on
var tooltipsOn = true;

// allow users to specify an external db to change links to
var extDB = "http://www.wowwiki.com/";

var $tfb;
var $ttfb;
var $htt;

// hides the tooltip
function hideTip() {
$tfb.html("").removeClass("tooltip-ready").addClass("hidden").css("visibility","hidden"); 
}

// displays the tooltip
function displayTip(e) {
$htt.not(":empty").removeClass("hidden").addClass("tooltip-ready");
moveTip(e);
$htt.not(":empty").css("visibility","visible");
}

// moves the tooltip
function moveTip(e) {
var newTop = e.clientY + ((e.clientY > ($(window).height()/2)) ? -($htt.not(".hidden").innerHeight()+20):20);
var newLeft = e.clientX + ((e.clientX > ($(window).width()/2)) ? -($htt.not(".hidden").innerWidth()+20):20);
$htt.not(".hidden").css({"position":"fixed","top":newTop + "px","left":newLeft + "px"});
}

// AJAX tooltips
function showTip(e) {
$t=$(this);
$p=$t.parent();
if ($p.hasClass("selflink")==false) {
$t.removeAttr("title");
$p.removeAttr("title");
$tfb.load("/"+$t.data("tt").replace(/ /g,"_").replace(/\?/g,"%3F")+"?action=render div.tooltip-content",function () {
if ($tfb.html() == "") $tfb.html('<div class="tooltip-content"><b>Error</b><br />This target either has no tooltip<br />or was not intended to have one.</div>');
$tfb.find(".tooltip-content").css("display","");
displayTip(e);
});
}
}

// quick tooltips
function hideTemplateTip() {
$ttfb.html("").removeClass("tooltip-ready").addClass("hidden"); 
}

function showTemplateTip(e) {
$ttfb.html('<div class="tooltip-content">' + $(this).next().html() + '</div>');
displayTip(e);
}

// add the tooltip calls to the page
function eLink(db,nm) {
dbs = new Array("http://www.wowarmory.com/search.xml?searchType=items&searchQuery=","http://www.wowhead.com/?search=","http://www.thottbot.com/?s=","http://wow.allakhazam.com/search.html?q=");
dbTs = new Array("Armory","Wowhead","Thottbot","Allakhazam");
dbHs = new Array("ℜ ","ω ","τ ","α");
el = '<a href="'+ dbs[db]+nm + '" target="_blank" title="'+ dbTs[db] +'">'+ dbHs[db] + '</a>';
return el;
}

function bindTT() {
$t=$(this);
$p=$t.parent();
if ($p.hasClass("selflink") == false) {
$t.data("tt", $p.attr("title").replace(" (page does not exist)","").replace("?","%3F")).mouseover(showTip).mouseout(hideTip).mousemove(moveTip);
if ($p.hasClass("new")) {
els = '<sup><span class="plainlinks">';
y=($t.hasClass("itemlink"))?0:1;
z=($t.hasClass("achievementlink"))?3:4;
for (x=y;x<z;x++) els += eLink(x,$t.data("tt").replace("Quest:",""));
$p.after(els+'</span></sup>');
}
if (extDB != "http://www.wowwiki.com/") { 
fullextURL = extDB + $t.data("tt");
$p.attr("href",fullextURL);
}
}
}

// check to see if it is active then do it
function ttMouseOver() {
if (tooltipsOn && getCookie("wiki-tiploader") != "no") {
$("#bodyContent").mouseover(hideTip);
$("#bodyContent").append('<div id="tfb" class="htt"></div><div id="templatetfb" class="htt"><div>');
$tfb = $("#tfb");
$ttfb = $("#templatetfb");
$htt = $("#tfb,#templatetfb");
$("#bodyContent span.ajaxttlink").each(bindTT);
$("#bodyContent span.tttemplatelink").mouseover(showTemplateTip).mouseout(hideTemplateTip).mousemove(moveTip);
}
}

The question is, which parts of it are really needed? There are references to sites like thottbot, I guess I could leave that piece out.

I'm going to make the item templates from scratch, so what exactly do I need to make them show up when you hover the mouse over the links? -- IcecreamKitten

What code sections you need depends on what you plan to do with it. --Pcj (T•C) 23:37, August 9, 2010 (UTC)

I'm not sure what do you mean. All I'm considering to make at this point is a tooltip that simulates the in-game item tooltip, and appears whenever you hover the mouse on the item link (from what I understand I need to make a template that creates the table with the information I specify, use it to make a page for an item, then use another template for linking the item). -- IcecreamKitten

Use this code:

var $tfb;

// hides the tooltip
function hideTip() {
$tfb.html("").removeClass("tooltip-ready").addClass("hidden").css("visibility","hidden"); 
}

// displays the tooltip
function displayTip(e) {
$tfb.not(":empty").removeClass("hidden").addClass("tooltip-ready");
moveTip(e);
$tfb.not(":empty").css("visibility","visible");
}

// moves the tooltip
function moveTip(e) {
var newTop = e.clientY + ((e.clientY > ($(window).height()/2)) ? -($tfb.not(".hidden").innerHeight()+20):20);
var newLeft = e.clientX + ((e.clientX > ($(window).width()/2)) ? -($tfb.not(".hidden").innerWidth()+20):20);
$tfb.not(".hidden").css({"position":"fixed","top":newTop + "px","left":newLeft + "px"});
}

// AJAX tooltips
function showTip(e) {
$t=$(this);
$p=$t.parent();
if ($p.hasClass("selflink")==false) {
$t.removeAttr("title");
$p.removeAttr("title");
$tfb.load("/"+$t.data("tt").replace(/ /g,"_").replace(/\?/g,"%3F")+"?action=render div.tooltip-content",function () {
if ($tfb.html() == "") $tfb.html('<div class="tooltip-content"><b>Error</b><br />This target either has no tooltip<br />or was not intended to have one.</div>');
$tfb.find(".tooltip-content").css("display","");
displayTip(e);
});
}
}

function bindTT() {
$t=$(this);
$p=$t.parent();
if ($p.hasClass("selflink") == false) $t.data("tt", $p.attr("title").replace(" (page does not exist)","").replace("?","%3F")).mouseover(showTip).mouseout(hideTip).mousemove(moveTip);
}

// check to see if it is active then do it
$(function() {
$("#bodyContent").mouseover(hideTip);
$("#bodyContent").append('<div id="tfb" class="htt"></div>');
$tfb = $("#tfb");
$("#bodyContent span.ajaxttlink").each(bindTT);
});

You will also need to have the following CSS:

.htt .tooltip-content .tooltip-hide, .hidden { display:none; }

.tooltip-ready {
visibility:hidden;
display:block;
z-index:999;
}

Wrap whatever you want on the destination page inside <div class="tooltip-content"></div> and denote whatever you want on the source page with <span class="ajaxttlink"></span>. --Pcj (T•C) 00:44, August 10, 2010 (UTC)

Pcj, so would you make a tooltip'd link like this:

[[source_page|<span class="ajaxttlink">i have a tooltip</span>]]? -- Fandyllic (talk · contr) 7:07 PM PST 9 Aug 2010

Yes. --Pcj (T•C) 02:27, August 10, 2010 (UTC)

Sweet, thank you. I've been looking for something similar to this. One thing though, how do you style the tooltip showing? I tried <includeonly> on the source page, but that didn't work. Duskey(talk) 20:21, August 10, 2010 (UTC)

You can use style="display:none;" to hide it on the target page and the JS will remove that when it loads it. --Pcj (T•C) 00:11, August 11, 2010 (UTC)

That codes worked nicely, thanks for the help :) We now have our first boss with tooltipped drop list :D

The only downside is the loading time, but I guess we can live with that. There's also a strange issue on the w:c:allods:Template:Item page, where the tooltip loads somewhere outside of the page the first time you mouse over the link. -- IcecreamKitten

Very cool. The loading time should only mostly be an issue the first time around. -- Fandyllic (talk · contr) 9:51 PM PST 10 Aug 2010

Can this be used to display tooltips by hovering over images? The doesn't seem to apply here. --IK ^Talk 01:24, August 13, 2010 (UTC)

Yes, you would have to re-write the code. --Pcj (T•C) 01:39, August 13, 2010 (UTC)

I managed to get around this by creating &nbsp text hotspots, and placing the images in the background. --IK ^Talk 05:26, August 16, 2010 (UTC)