<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myTBL td.DarkGreen
{
font:14px helvetica, arial, sans-serif;
color : White;
font-weight:800;
background-color:DarkGreen;
background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
}
#myTBL td.Indigo
{
font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/
color : White; /*#ccc #666 #000 White*/
font-weight:800;
background-color:Indigo;
background: linear-gradient(180deg, Indigo 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
}
#myTBL td.YellowGreen
{
font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/
color : #000000; /*#ccc #666 #000 White*/
font-weight:700;
background-color:YellowGreen;
background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
}
td{
height: auto;/*23*/
cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer;
opacity:0.99;
}
td{
position: relative;
}
td:after {
position: absolute;
}
#myTBL td:hover:after {
background-color: Gray; /*стиль подсказки*/
font:14px helvetica, arial, sans-serif;
color : Lavender;
font-weight:700;
border-radius: 1px;
padding: 4px;/*8*/
opacity: 1;/*1*/
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6);
z-index: 10;
}
td.DarkGreen:after{
width: 70px;
opacity:0;
content: "ALLIN и ещё много много текста";
left:0;
bottom: 30px;
}
td.Indigo:after{
opacity:0;
content: "Raise-4bet-Allin и ещё много много текста";
left:0;
bottom: 30px;
width: 70px;
}
td.YellowGreen:after{
opacity:0;
content: "raise-Call 3beta и ещё много много текста";
left:0;
bottom: 30px;
width: 70px;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
var table = document.querySelector('#myTBL'),
color = document.querySelectorAll('[name="COLOR"]');
table.addEventListener('click', function() {
var target = event.target;
if (target.closest("td")) {
[].forEach.call( color, function(el) {
el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id);
});
}
});
});
</script>
</head>
<body>
<table width="100%" height="100%" id="myTBL" class="select">
<tr>
<td class="oAK" bgcolor="PaleGoldenrod">
AK
</td>
<td class="aKK" bgcolor="#BEBEBE">
KK
</td>
<td class="sKQ" bgcolor="PaleGreen">
KQ
</td>
<td class="sKJ" bgcolor="PaleGreen">
KJ
</td>
<td class="sKT" bgcolor="PaleGreen">
KT
</td>
</tr>
<tr>
<td class="oAQ" bgcolor="PaleGoldenrod">
AQ
</td>
<td class="oKQ" bgcolor="PaleGoldenrod">
KQ
</td>
<td class="aQQ" bgcolor="PaleGoldenrod">
QQ
</td>
<td class="sQJ" bgcolor="PaleGreen">
QJ
</td>
<td class="sQT" bgcolor="PaleGreen">
QT
</td>
</tr>
<tr>
<td class="oAJ" bgcolor="PaleGoldenrod">
AJ
</td>
<td class="oKJ" bgcolor="PaleGoldenrod">
KJ
</td>
<td class="oQJ" bgcolor="PaleGoldenrod">
QJ
</td>
<td class="aJJ" bgcolor="#BEBEBE">
JJ
</td>
<td class="sJT" bgcolor="PaleGreen">
JT
</td>
</tr>
</table>
<input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked">
<label for="DarkGreen">DarkGreen</label>
<input type="radio" id="Indigo" name="COLOR" value="" >
<label for="Indigo">Indigo</label>
<input type="radio" id="YellowGreen" name="COLOR" value="">
<label for="YellowGreen">YellowGreen</label>
</body>
</html>
Для правильной оценки ситуации окно броузера должно быть минимальным!!! Это текущий вариант сделанный по твоим рекомендациям.