How do I implement a tooltip design on a full calendar? I need the tooltip to appear when hovering over an event in the calendar. Any assistance with this issue would be greatly appreciated. Thanks in advance!
//reference
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/trueno" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id="calendar"></div>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
height: 700,
editable:false,
eventColor: '#378006',
eventBackgroundColor: "#cce5ff",
eventBorderColor: "#b8daff",
eventTextColor: '#004085',
displayEventTime: false,
header:{
left:'prev,next today',
center:'',
right:'title'
},
events: 'load.php',
eventRender: function(event, element) {
element.attr('title', event.tooltip);
}
});
});
</script>
//php
<?php
//load.php
$connect = new PDO('mysql:host=localhost;dbname=voters', 'root', 'P@ssw0rd@sql');
$data = array();
$query = "SELECT * FROM schedulling ORDER BY id";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$data[] = array(
'id' => $row["id"],
'title' => $row["title"],
'start' => $row["start_date"],
'end' => $row["end_date"],
'notes' => $row['start_time'],
'tooltip' => "Random Data"
);
}
echo json_encode($data);
?>