JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<div id="container">
    I <span class="unit" rel="maRine">marine</span> rushed. He countered with twice as many <span class="unit" rel="zealot">zealots</span>. Bah!
<br /><br />
    <span class="unit" rel="Pneumatized Carapace">Need an upgrade.</span>
    <p><div id="status"></div></p>
</div>

CSS

#hovercard {
    height: 70px;
    width: 150px;
    color: #000;
    font-family: Verdana;
    font-size: 0.7em;
    padding: 5px;
    background-color: #fff;
    border: solid 2px #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.unit {
    font-family: Verdana;
    font-size: 1em;
    color: #000;
    border-bottom: dotted 1px #000;
}

.unit:hover {
    border-bottom: none;
    cursor: pointer;
    color: #999;
}

JavaScript

/**
 * @author Kai Mallea <[email protected]>
 */
(function () {
    var elements = document.querySelectorAll('*[rel]') ||
//                 document.evaluate("//*[@rel]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null) ||
                   oXmlDom.documentElement.selectNodes("[@rel]");

    if (!elements) { throw new Error("sc2-hovercards: couldn't find any matching DOM elements"); }
    
    var i = 0,
        container = document.getElementById("container"),
        status = document.getElementById("status"),
        hovercard = document.createElement("div"),
        sc2objects = {
            /**
             * Protoss Units
             */
            "Probe": {
                "build_from": "Nexus",
                "race": "Protoss",
                "health": "20",
                "mineral": "50",
                "supply": "1",
                "armor": "0",
                "energy": "20",
                "build_time": "17",
                "vespene": "0"
            },
            "Zealot": {
                "build_from": "Gateway",
                "race": "Protoss",
                "health": "100",
                "mineral": "100",
                "supply": "2",
                "armor": "0",
                "energy": "50",
                "build_time": "38",
                "vespene": "0"
            },
            "Stalker": {
                "build_from": "Gateway",
                "race": "Protoss",
                "health": "80",
                "mineral": "125",
                "supply": "2",
                "armor": "0",
                "energy": "80",
                "build_time": "42",
                "requires": "Cybernetics Core",
                "vespene": "50"
            },
            "Sentry": {
                "build_from": "Gateway",
                "race": "Protoss",
                "health": "40",
                "mineral": "50",
                "supply": "2",
                "armor": "200",
                "energy": "40",
 ...