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.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 4995 days. It is considered archived - the discussion is over. Information in this thread may be out of date. 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 (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:
- 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
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;
}
- 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
- 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
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)