User:Cristimirt/ModTooltip

This is a page where I'm currently testing the Tooltips for Mods. I used the code from WoWWiki.com and adapted it to suit our needs. It will probably not work for you unless you

The Javascript that I use is located at

// This tooltip code was written by Pcj // Adapted for Warframe Wikia by CristiMirt

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 ($t.hasClass("selflink")===false) { $t.removeAttr("title"); //$p.removeAttr("title"); $tfb.load("/"+$t.data("tt").replace(/ /g,"_").replace(/\?/g,"%3F")+"?action=render table.infobox td.image a",function { //$tfb.html(' ' + $tfb.html.closest('tr').find('.image').text + ' ');    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 ($t.hasClass("selflink") === false) $t.data("tt", $t.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 { var BC;  if(skin=='oasis') { BC = '.WikiaSiteWrapper'; }  else { BC = '#bodyContent'; }  $(BC).mouseover(hideTip);  $(BC).append(' ');  $tfb = $("#tfb");  $(BC + " span.ajaxttlink a").each(bindTT); });

And the CSS is this: .htt .tooltip-content .tooltip-hide, .hidden { display:none; }

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

} .tooltip-ready img{ width:70%; height:auto; }

.no-tooltip { border:1px solid #bebebe; background-color:#eeeeee; padding:3px; } .no-tooltip b{   font-weight:bold; }

This is an example that shows how it works, but only if you imported the script and css in your own js and css files (wikia or common).

Serration

As you can see, it only displays the card of the mod, which is perfect, I think.

We could also add a mod icon in front of it, to make it more obvious that we're talking about a mod.

Serration

The image is taken directly from the info table of the Mod page (the first column with the class "image" from the table with the class "infobox"), and because of this, it also works with weapons:

Boltor Prime

If we use it for something that doesn't have an "infobox" table (or the table doesn't have a column with the class "image"), it will show like this:

Tyl Regor

In order to test the functionality, I wrapped the link into a span with the class "ajaxttlink": Serration

This is because we can't add atributes to the wiki links. But adding spans everytime we want to link mods is not good. So we could use a template, and instead of writing all that, we could write just this:

or

I'm still learning the wiki markup, and I'm not that good with JS either, so this could probably be improved a lot.