konart,
документацию почитали бы чтоли ...
ниже один из вариантов, также можно было указать title
.attr("title", content[el.value] || "")
, не используя
content: content[el.value] || ""
http://api.jqueryui.com/tooltip/
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myTBL td.DarkGreen, .ui-tooltip.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, .ui-tooltip.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, .ui-tooltip.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;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var content = {
DarkGreen: "ALLIN и ещё <br>много много текста",
Indigo: "56<br><img src='https://javascript.ru/forum/images/smilies/cray.gif' alt=''>",
YellowGreen: "90"
};
$("#myTBL").on("click", "td", function() {
var target = this,
rem = 0,
len = $('[name="COLOR"]').each(function(indx, el) {
el.checked && !target.classList.contains(el.value) ? $(target).addClass(el.value).attr("title", el.value).tooltip({
//track: true,
tooltipClass: el.value,
content: content[el.value] || ""
}).tooltip("open") : ($(target).removeClass(el.value), rem++)
}).length;
if (rem == len) $(target).tooltip("destroy").removeAttr("title")
})
});
</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" name="COLOR" value="DarkGreen" checked="checked">
<label for="DarkGreen">DarkGreen</label>
<input type="radio" name="COLOR" value="Indigo" >
<label for="Indigo">Indigo</label>
<input type="radio" name="COLOR" value="YellowGreen">
<label for="YellowGreen">YellowGreen</label>
</body>
</html>