I'm having trouble with my code as the tooltip is not showing up! Interestingly, when I tested the CSS on a static table, it worked perfectly.
Essentially, the table in the code is dynamically created using information from an array for headers and data from an associative array.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Json Array to Html Table</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
.day {
position: relative;
}
.day .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
.day .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.day:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<p><br/><br/></p>
<div id="tblContainer"></div>
</body>
<script>
$(document).ready(function(){
// Table Headers
var headers = ["S", "M", "T", "W", "T", "F", "S"];
// Json Array
var myData = [
{"Date":"25/12/2016", "MonthName":"January","DataDiff":"7","MonthDays":"31"},
{"Date":"29/01/2017", "MonthName":"February","DataDiff":"3","MonthDays":"28"},
{"Date":"26/02/2017", "MonthName":"March","DataDiff":"3","MonthDays":"31"},
{"Date":"26/03/2017", "MonthName":"April","DataDiff":"6","MonthDays":"30"}
];
// Create Table
var cityTable = makeTable_HeadersOnly($('#tblContainer'), headers, "Planner", 6 );
// Append data from Json array
appendTableRowsJsonFile(cityTable, myData);
});
// Make Table just with headers
function makeTable_HeadersOnly(container, data, id, nrTimes) {
var table = $('<table id=' + id + '/>');
var row = $('<thead/>');
row.append($('<tr/>'));
// First Column
row.append($('<th/>').text(""));
// Generates the columns
for (i=1; i <= nrTimes; i++) {
$.each(data, function(colIndex, c) {
row.append($("<th/>").text(c));
});
}
table.append(row);
// tbody
row = $('<tbody/>');
table.append(row);
return container.append(table);
}
// append table row from json file
function appendTableRowsJsonFile($table, jdata) {
var day = 1;
var diff = 0;
var daysMth = 0;
var data = "";
$.each(jdata, function(key, value){
// Month
let tr = $("<tr/>");
tr.append($("<td/>").text(value.MonthName));
// Fill days
diff = parseInt(value.DataDiff);
daysMth = parseInt(value.MonthDays);
for (i = 1; i <= 42; i++) {
if (i <= diff ){
tr.append($("<td/>").text(''));
} else if (i <= diff + daysMth) {
day = i - diff;
tr.append($('<td/ class="day" data-date="show date">').text(day));
} else{
tr.append($("<td/>").text(''));
}
}
$table.find('tbody').last().append(tr);
});
}
// Tooltip - class 'day'
$('.day').hover(function(e){
alert('Tooltip');
title = $(this).attr('data-date');
$(this).append('<span class="tooltiptext">'+ title +'</span>');
},
function(e){
$('span', this).remove();
});
</script>
</html>
Can anyone help me figure out what's wrong with the code?
Best regards, Elio Fernandes