JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css">
<table class="weapons" width="500" border="1" cellspacing="0">
    <caption>Maschinenpistolen (Hauptwaffen)</caption>
    <thead>
    <tr>
        <th width="90" scope="col">&nbsp;</th>
        <th width="40" scope="col">Schaden</th>
        <th width="47" scope="col">Rückstoß</th>
        <th width="50" scope="col">Feuerrate</th>
        <th width="45" scope="col">Präzision</th>
        <th width="44" scope="col">Magazin</th>
        <th width="33" scope="col">Preis</th>
        <th width="45" scope="col">Effizienz Schaden</th>
        <th width="58" scope="col">Effizienz Accuracy</th>
    </tr>
    </thead>
    <tbody>
<tr data-tooltip-img-src="http://img2.wikia.nocookie.net/__cb20110425235151/cfire/de/images/thumb/9/90/M4a1.jpg/352px-M4a1.jpg">
        <th align="left" scope="row">M4A1</th>
        <td bgcolor="#F8080C">44</td>
        <td>54</td>
        <td bgcolor="#DCB902">99</td>
        <td>76</td>
        <td bgcolor="#F8080C">20 / 10</td>
        <td>14.000</td>
        <td bgcolor="#9E8507">143</td>
        <td>22</td>
    </tr>
    <tr data-tooltip-img-src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Heckler_%26_Koch_MP5-2.jpg/300px-Heckler_%26_Koch_MP5-2.jpg">
        <th align="left" scope="row">MP5K</th>
        <td>48</td>
        <td bgcolor="#F8080C">66</td>
        <td>91</td>
        <td>70</td>
        <td>30 / 120</td>
        <td bgcolor="#067804">13.000</td>
        <td>139</td>
        <td bgcolor="#067804">4</td>
    </tr>
    </tbody>
</table>

CSS

.qtip{ max-width: 800px }

JavaScript

$('.weapons tbody tr').qtip({
    content: {
        text: function(event, api) {
            var src = api.target.data('tooltip-img-src');
            if (src) {
                return '<img src="' + src + '" />';
            } else {
                return 'kein bild hinterlegt';
            }
            
        }
    },
    position: {
        my: 'top center',  // Position my top left...
        at: 'bottom center', // at the bottom right of...
    }
});