As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have static text in place. In the functionMouseOver() function, I need to retrieve the cell content and use it as the tool tip text. I am having trouble finding the JavaScript method to accomplish this. Below is the code that I currently have. Thank you for any assistance.
function functionMouseOver(id) {
document.getElementById(id).style.backgroundColor = "rgb(0,255,255)";
}
function functionMouseOut(id) {
document.getElementById(id).style.backgroundColor = "rgb(255,255,255)";
}
// create HTML Table body
titlenames = ["Jan", "Feb", "Mar"]
var HTMLTableBody = "";
HTMLTableBody += "<div class='container'><table id='id1' style='width:40%'>";
HTMLTableBody += "<tr>";
for (var i = 0; i < 3; i++) {
HTMLTableBody += "<th id='th" + i + "' class='class1'>" + titlenames[i] + "</th>";
}
HTMLTableBody += "</tr>";
var cnt = 0;
for (var i = 0; i < 2; i++) {
HTMLTableBody += "<tr>";
for (var j = 0; j < 3; j++) {
idstr = "td" + cnt;
HTMLTableBody += "<td id='td" + cnt + "' class='class2'" +
' onMouseOver =' + '"functionMouseOver(' + "'" + idstr + "'" + ')"' +
' onMouseOut =' + '"functionMouseOut(' + "'" + idstr + "'" + ')"' +
' data-container =' + '"body"' +
' data-placement=' + '"right"' +
' data-toggle=' + '"tooltip"' +
' title=' + '"text"' +
"></td > ";
cnt++;
}
HTMLTableBody += "</tr>";
}
HTMLTableBody += "</table></div>";
document.getElementById("HTMLBody").innerHTML = "" + HTMLTableBody;
// fill table with data
cnt = 0;
for (var i = 0; i < 2; i++) {
for (var j = 0; j < 3; j++) {
var strid = "td" + cnt;
document.getElementById(strid).innerHTML = cnt;
cnt++;
}
}
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});.class2 {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-align: center;
font-size: 36px;
font-family: "Lucida Console", Monaco, monospace;
}
.class1 {
background-color: rgb(200, 100, 200);
color: rgb(255, 255, 255);
text-align: center;
font-size: 36px;
font-family: "Lucida Console", Monaco, monospace;
}
table {
border-spacing: 1px;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td {
cursor: pointer;
padding: 10px;
position: relative;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="HTMLBody">
</body>