Source: tooltip.js

/* source:jsfiddle.net/HJf8q/2/ */

// TODO kleines Balckendiagram einfuegen
// row: the place in the current ranking
// year: the year of the current ranking
/**
 * Displays the values of the stacked bar chart in a tooltip
 * @param svgID id of the stacked bar chart element
 */
function displayToolTipBox(svgID) { //
    //console.log("displayToolTipBox");
    let targetID = svgID.id; //target.id;
    let rank = targetID.substring(3, 4);
    let year = targetID.substring(5, 9);
    let nrOfRounds = targetID.substring(10, 12);
    let currentKey = targetID.substring(5, 12);
    //console.log("HERE: " + targetID + " rank: " + rank + " year: " + year + " currentKey: " + currentKey);
    var xyz = parseInt(nrOfRounds);
    let dataUsed = null;
    if (parseInt(nrOfRounds) < 10) {
        dataUsed = databegegnungen;
    } else {
        dataUsed = datayears;
    }
    let relevantData = dataUsed[currentKey][rank];
    //console.log(relevantData);
    var tooltip = document.getElementById("tooltip-span");
    tooltip.style.display = "block";
    tooltip.innerHTML = "";

    var teamName = document.createElement("h4");
    teamName.style.padding = "5px";
    teamName.style.marginBottom = "1px";
    teamName.style.marginTop = "0px";
    //console.log(relevantData);
    teamName.innerHTML = relevantData["name"];
    //console.log(teamName);
    tooltip.append(teamName);

    if (nrOfRounds !== "10") {
        var teamName = document.createElement("h5");
        teamName.style.padding = "5px";
        teamName.style.marginBottom = "1px";
        teamName.style.marginTop = "0px";
        //console.log(relevantData);
        teamName.innerHTML = "gegen " + relevantData["nameGegner"];
        //console.log(teamName);
        tooltip.append(teamName);
    }

// ---------tabelle---------------------
    var table = document.createElement("table");
    table.cellPadding = "4px";
    table.cellSpacing = 0;
    tooltip.appendChild(table);


//------------------------------Legende------------------------------------------
    var trLegende = document.createElement("tr");
    table.appendChild(trLegende);
    var colorLegend1 = document.createElement("td");
    trLegende.appendChild(colorLegend1);
    colorLegend1.innerHTML = "&nbsp;";

    var tbLegend2 = document.createElement("td");
    trLegende.appendChild(tbLegend2);
    tbLegend2.innerHTML = "Art";

    var tbLegend3Siege = document.createElement("td");
    tbLegend3Siege.style.textAlign = "center";
    trLegende.appendChild(tbLegend3Siege);
    tbLegend3Siege.innerHTML = "S";

    var tbLegendNiederlagen = document.createElement("td");

    tbLegendNiederlagen.style.textAlign = "center";
    trLegende.appendChild(tbLegendNiederlagen);
    tbLegendNiederlagen.innerHTML = "N";

    // TODO in While schleife zusammenfassen

// ------------------------------Stamm vs Stamm------------------------------------------
    if (relevantData["ESSS"] > 0 || relevantData["ENSS"] > 0) {
        var tr1 = document.createElement("tr");
        table.appendChild(tr1);
        var color1 = document.createElement("td");
        tr1.appendChild(color1);
        var c1div = document.createElement("div");
        c1div.className = "colorbox HSKgASK";
        c1div.innerHTML = "&nbsp;";
        color1.appendChild(c1div);
        var tb1 = document.createElement("td");
        tr1.appendChild(tb1);
        tb1.innerHTML = "Einzelsiege Stammkämpfer vs. Stammkämpfer";
        var tb1Sieg = document.createElement("td");
        tb1Sieg.style.textAlign = "center";
        tr1.appendChild(tb1Sieg);
        tb1Sieg.innerHTML = relevantData["ESSS"];
        var tb1Niederlage = document.createElement("td");
        tb1Niederlage.style.textAlign = "center";
        tr1.appendChild(tb1Niederlage);
        tb1Niederlage.innerHTML = relevantData["ENSS"];
    }

//-------------------------------Stamm vs Lizenz-----------------------------------------
    if (relevantData["ESSL"] > 0 || relevantData["ENSL"] > 0) {
        var tr2 = document.createElement("tr");
        table.appendChild(tr2);
        var color2 = document.createElement("td");
        tr2.appendChild(color2);
        var c2div = document.createElement("div");
        c2div.className = "colorbox HSKgALK";
        c2div.innerHTML = "&nbsp;";
        color2.appendChild(c2div);
        var tb3 = document.createElement("td");
        tr2.appendChild(tb3);
        tb3.innerHTML = "Einzelsiege Stammkämpfer vs. Lizenzkämpfer";
        var tb2Sieg = document.createElement("td");
        tb2Sieg.style.textAlign = "center";
        tr2.appendChild(tb2Sieg);
        tb2Sieg.innerHTML = relevantData["ESSL"];
        var tb2Niederlage = document.createElement("td");
        tb2Niederlage.style.textAlign = "center";
        tr2.appendChild(tb2Niederlage);
        tb2Niederlage.innerHTML = relevantData["ENSL"];
    }


//----------------------------------Lizenz vs Stamm--------------------------------------
    if (relevantData["ESLS"] > 0 || relevantData["ENLS"] > 0) {
        var tr3 = document.createElement("tr");
        table.appendChild(tr3);
        var color3 = document.createElement("td");
        tr3.appendChild(color3);
        var c3div = document.createElement("div");
        c3div.className = "colorbox HLKgASK";
        c3div.innerHTML = "&nbsp;";
        color3.appendChild(c3div);
        var tb5 = document.createElement("td");
        tr3.appendChild(tb5);
        tb5.innerHTML = "Einzelsiege Lizenzkämpfer vs. Stammkämpfer";
        var tb3Siege = document.createElement("td");
        tb3Siege.style.textAlign = "center";
        tr3.appendChild(tb3Siege);
        tb3Siege.innerHTML = relevantData["ESLS"];
        var tb3Niederlage = document.createElement("td");
        tb3Niederlage.style.textAlign = "center";
        tr3.appendChild(tb3Niederlage);
        tb3Niederlage.innerHTML = relevantData["ENLS"];
    }

//-------------------------------------Lizenz vs Lizenz-----------------------------------
    if (relevantData["ESLL"] > 0 || relevantData["ENLL"] > 0) {
        var tr4 = document.createElement("tr");
        table.appendChild(tr4);
        var color4 = document.createElement("td");
        tr4.appendChild(color4);
        var c4div = document.createElement("div");
        c4div.className = "colorbox HLKgALK";
        c4div.innerHTML = "&nbsp;";
        color4.appendChild(c4div);
        var tb7 = document.createElement("td");
        tr4.appendChild(tb7);
        tb7.innerHTML = "Einzelsiege Lizenzkämpfer vs. Lizenzkämpfer";
        var tb4Siege = document.createElement("td");
        tb4Siege.style.textAlign = "center";
        tr4.appendChild(tb4Siege);
        tb4Siege.innerHTML = relevantData["ESLL"];
        var tb4Niederlage = document.createElement("td");
        tb4Niederlage.style.textAlign = "center";
        tr4.appendChild(tb4Niederlage);
        tb4Niederlage.innerHTML = relevantData["ENLL"];
    }

//-------------------------------------Kampflos-----------------------------------
    if (relevantData["ESKL"] > 0 || relevantData["ENKL"] > 0) {
        var tr5 = document.createElement("tr");
        table.appendChild(tr5);
        var color5 = document.createElement("td");
        tr5.appendChild(color5);
        var c5div = document.createElement("div");
        c5div.className = "colorbox HKL";
        c5div.innerHTML = "&nbsp;";
        color5.appendChild(c5div);
        var tb9 = document.createElement("td");
        tr5.appendChild(tb9);
        tb9.innerHTML = "Kampflos";
        var tb5Siege = document.createElement("td");
        tb5Siege.style.textAlign = "center";
        tr5.appendChild(tb5Siege);
        tb5Siege.innerHTML = relevantData["ESKL"];
        var tb5Niederlage = document.createElement("td");
        tb5Niederlage.style.textAlign = "center";
        tr5.appendChild(tb5Niederlage);
        tb5Niederlage.innerHTML = relevantData["ENKL"];
    }

//-------------------------------------Gesamt-----------------------------------
    var tr6 = document.createElement("tr");
    table.appendChild(tr6);
    var color6 = document.createElement("td");
    tr6.appendChild(color6);
    var c6div = document.createElement("div");
    c6div.className = "colorbox";
    c6div.innerHTML = "&nbsp;";
    color6.appendChild(c6div);
    var tb6 = document.createElement("td");
    tr6.appendChild(tb6);
    tb6.innerHTML = "Gesamt";
    var tb6Siege = document.createElement("td");
    tb6Siege.style.textAlign = "center";
    tr6.appendChild(tb6Siege);
    tb6Siege.innerHTML = relevantData["ES"];
    var tb6Niederlage = document.createElement("td");
    tb6Niederlage.style.textAlign = "center";
    tr6.appendChild(tb6Niederlage);
    tb6Niederlage.innerHTML = relevantData["EN"];

    color6.style.borderTop = "1px solid black";
    tb6.style.borderTop = "1px solid black";
    tb6Siege.style.borderTop = "1px solid black";
    tb6Niederlage.style.borderTop = "1px solid black";


    $('.HSKgASK').css('backgroundColor', colors.ss);
    $('.HSKgALK').css('backgroundColor', colors.sl);
    $('.HLKgASK').css('backgroundColor', colors.ls);
    $('.HLKgALK').css('backgroundColor', colors.ll);
    $('.HKL').css('backgroundColor', colors.kl);
    $('.AKL').css('backgroundColor', colors.kl);
}

/**
 * Hides tool tip box of the stacked bar chart
 */
function hideToolTipBox() {
    var tooltip = document.getElementById("tooltip-span");
    tooltip.style.display = "none";
}

/**
 * Updates the position of the tooltip box
 * @param e mouse event that triggered the call
 */
function followingBox(e) {
    var x = e.clientX,
        y = e.clientY,
        width = tooltipSpan.clientWidth,
        height = tooltipSpan.clientHeight;
    // TODO if it is really close to the corner it reduces the width of the columns
    if (x + width + 20 + 15 <= window.innerWidth) {
        tooltipSpan.style.left = (x + 15) + 'px';
    } else if (x > window.innerWidth) {
        hideToolTipBox()
    } else {
        tooltipSpan.style.left = (window.innerWidth - width) + 'px';
    }
    if (y + height + 42 + 15 <= window.innerHeight) {
        tooltipSpan.style.top = (y + 15) + 'px';
    } else if (y > window.innerHeight) {
        hideToolTipBox()
    } else {
        tooltipSpan.style.top = (window.innerHeight - height - 42) + 'px';
    }

}