FFItemTooltip.js

$(function() {
    
    var tooltip = $("<div id=\"item-tooltip\"></div>");
    
    /*
    <div id="item-tooltip" style="
    left: 1040px;
    top: 450px;
">
    <div class="it-header"><img src="https://vignette.wikia.nocookie.net/fantastic-frontier-roblox/images/0/0b/RatboyHandgun.png/revision/latest/scale-to-width-down/80?cb=20190119002640"><div class="it-title">Ratboy Handgun and a really long title as a test.</div></div><div class="it-infobox it-desc">A mechanical handgun created by the Ratboy people.</div>

<div class="it-infobox">
	<div class="it-infoitem"><span class="it-infoitem-key">Type</span><span class="it-infoitem-val">Ranged</span></div>
</div>
<div class="it-infobox">
	<div class="it-infoitem"><span class="it-infoitem-key">Damage</span><span class="it-infoitem-val">500 (Basic Attack)<br>675 (Divine Shot)</span></div><div class="it-infoitem"><span class="it-infoitem-key">Special Ability</span><span class="it-infoitem-val">Divine Shot</span></div>
</div>
<div class="it-infobox">
	<div class="it-infoitem"><span class="it-infoitem-key">Price</span><span class="it-infoitem-val">25,000,000g</span></div>
    <div class="it-infoitem"><span class="it-infoitem-key">Selling Price</span><span class="it-infoitem-val">10,000,000g</span></div>
    <div class="it-infoitem"><span class="it-infoitem-key">Source(s)</span><span class="it-infoitem-val">Frog<br>Ratboy's Nightmare Dungeon</span></div>
</div>
    
</div>
    */
    
    // Cache for already-checked items, to save resources.
    var cache = {};
    
    function generateSection(sec, items) {
        for (var i = 0; i < items.length; i++) {
            var item = $("<div class=\"it-infoitem\"><span class=\"it-infoitem-key\"></span><span class=\"it-infoitem-val\"></span></div>");
            var current = $(items[i]);
            item.find(".it-infoitem-key").text(current.find(".pi-data-label").text());
            item.find(".it-infoitem-val").html(current.find(".pi-data-value").html()); // To allow for listing.
            sec.append(item);
        }
    }
    
    // Updates the DOM for our tooltip element using the found data.
    function setTooltip(data) {
        tooltip.html("<div class=\"it-header\"><img/><div class=\"it-title\">-</div></div>");
        tooltip.find(".it-title").text(data.find(".pi-title").text());
        tooltip.find(".it-header img").attr("src", data.find(".pi-image img").attr("src"));
        if (data.find(".pi-image .pi-caption").length > 0)
            tooltip.append($("<div class=\"it-infobox it-desc\"></div>").text(data.find(".pi-image .pi-caption").text()));
        var dsec = data.find("section, >.pi-data");
        for (var i = 0; i < dsec.length; i++) {
            var sec = $("<div class=\"it-infobox\"></div>");
            if (dsec.is("section"))
                generateSection(sec, dsec.find(".pi-data"));
            else
                generateSection(sec, $(dsec[i]));
            tooltip.append(sec);
        }
        tooltip.show();
    }
    
    // Checks if we have cached data on the article, and loads/sets accordingly.
    function updateTooltip(article) {
        tooltip.hide();
        if (article in cache) {
            if (cache[article] !== false) {
                setTooltip(cache[article]);
            }
        } else {
            $.get("https://fantastic-frontier-roblox.wikia.com/wiki/" + article, function(domString) {
                var dom = $(domString);
                var infobox = dom.find(".portable-infobox");
                if (infobox.length > 0) {
                    cache[article] = infobox;
                    setTooltip(infobox);
                } else {
                    // No infobox, so we'll mark this article as not having a tooltip.
                    cache[article] = false;
                }
            });
        }
    }
    
    // Assigns hover-logic for an element to display tooltips.
    function setupElement(elem) {
        var article = elem.attr("href").substr(6); // Trim away /wiki/.
        elem.hover(function() {
            updateTooltip(article);
        }, function() {
            tooltip.hide();
        });
    }
    
    // Hook up tooltips to wiki links.
    $("a[href^='/wiki/']").each(function() {
        setupElement($(this));
    });
    
    tooltip.hide();
    $(document.body).append(tooltip);
});