temp dynamic title

temp test by AD

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<body>
<table id="table1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<br><br>
<p>Table 2</p>
<table id="table2">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

CSS

td {
  width: 20px;
  height: 20px;
  padding: 2px;
  background-color: #CCC;
}

td:hover {
  background-color: #EEE;
}

.clicked {
  background-color: lightblue;
}

p {
  font-family: arial;
}

  label {
    display: inline-block;
    width: 5em;
  }

JavaScript

$('td').click( function() {
  //alert("clicked");

  if ($(this).hasClass("clicked")) {
    //do unlike
    //alert("has class");
    $(this).removeClass("clicked");
    $(this).attr("title", "");
    // $(this).tooltip('disable');
    
  }
  else {
    //do like
    //alert("doesnt have class");
    $(this).addClass("clicked");
    $(this).attr("title", "Whatever");
  }

});

$('#table2').tooltip();