Fandom

Community Central

Wowwiki tooltips code

Forum page

19,012pages on
this wiki
Add New Page
Share

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

This Forum has been archived

Visit the new Forums
Forums: Index Community Central Forum Wowwiki tooltips code
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 44 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.


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


Looks like the common.js code that does it is the following:
// 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 (TC) 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 (TC) 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 (TC) 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 (TC) 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 (TC) 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)

Also on Fandom

Random Wiki