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).attr("aria-descripeby", "");
        $(this).tooltip('destroy');

    } else {
        //do like
        //alert("doesnt have class");
        $(this).addClass("clicked");
        $(this).attr("title", "Whatever");
        $(this).tooltip();
    }

});

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