Demo
$(document).ready(function() {
timeslotize($('.time-board'));
$('[data-toggle="tooltip"]').tooltip();
});
<div class='time-board time-board-hover'></div>
<div class='time-board time-board-hover' value='0xFFF00,0x3FF80,0xFF0,0xF803F8,0xFFF00,0xFFF800,0xF00'></div>
<div class='time-board time-board-hover' value='0xFFF00,0x3FF80,0xFF0,0xF803F8,0xFFF00,0xFFF800,0xF00,0xF00,0xFFF800,0xFFF00,0xFFF00,0xFF0,0xF803F8,0x3FF80'></div>
<div class='time-board time-board-input time-board-hover' value='0xFFF00,0x3FF80,0xFF0,0xF803F8,0xFFF00,0xFFF800,0xF00' inputname='child[time_slot]'></div>