Community Central

Wowwiki tooltips code

Forum page

18,681pages on
this wiki

This Forum has been archived

Visit the new Forums
Forums: Index Community Central Forum Wowwiki tooltips code
Wikia'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 2220 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.

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() {

// displays the tooltip
function displayTip(e) {

// 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) {
if ($p.hasClass("selflink")==false) {
$tfb.load("/"+$"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>');

function bindTT() {
if ($p.hasClass("selflink") == false) $"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").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 {
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)

Around Wikia's network

Random Wiki