Forum:Wowwiki tooltips code

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

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. -- 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(' Error This target either has no tooltip or was not intended to have one. '); $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(' '); $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  and denote whatever you want on the source page with   . -- 00:44, August 10, 2010 (UTC)


 * Pcj, so would you make a tooltip'd link like this:
 * ? -- Fandyllic  (talk &middot; contr) 7:07 PM PST 9 Aug 2010
 * Yes. -- 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  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. -- 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 &middot; 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. -- 01:24, August 13, 2010 (UTC)
 * Yes, you would have to re-write the code. -- 01:39, August 13, 2010 (UTC)
 * I managed to get around this by creating &nbsp text hotspots, and placing the images in the background. -- 05:26, August 16, 2010 (UTC)