jabez007 · October 26, 2017 22:10
diff --git a/FullCalendarTooltips.html b/FullCalendarTooltips.html
 <html>
 <!-- https://fullcalendar.io/ -->
 <!-- https://getbootstrap.com/docs/3.3/javascript/#tooltips -->
 	<head>
 		<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.css"></link>
 		<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.print.css" media="print"></link>
 	
 		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 		<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
 		<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.js"></script>
 		
 		<script type="text/javascript">
 			$(document).ready(function() {
 				// page is now ready, initialize the calendar...				
 				$('#calendar').fullCalendar({
 					themeSystem: 'bootstrap3',
 					header: {
 						left: 'prev,next today',
 						center: 'title',
 						right: 'month,agendaWeek,agendaDay,listMonth'
 					},
 					defaultDate: '2017-10-12',
 					events: [
 						{
 							title: 'Foothills of the Spire Event',
 							start: '2017-10-01'
 						},
 						{
 							title: 'Long Event',
 							start: '2017-10-07',
 							end: '2017-10-10'
 						},
 						{
 							id: 999,
 							title: 'Repeating Event',
 							start: '2017-10-09T16:00:00',
 							end: '2017-10-09T17:00:00'
 						},
 						{
 							id: 999,
 							title: 'Repeating Event',
 							start: '2017-10-16T16:00:00',
 							end: '2017-10-09T17:00:00'
 						},
 						{
 							title: 'Conference',
 							start: '2017-10-11',
 							end: '2017-10-13'
 						},
 						{
 							title: 'Meeting',
 							start: '2017-10-12T10:30:00',
 							end: '2017-10-12T12:30:00'
 						},
 						{
 							title: 'Lunch',
 							start: '2017-10-12T12:00:00'
 						},
 						{
 							title: 'Meeting',
 							start: '2017-10-12T14:30:00'
 						},
 						{
 							title: 'Happy Hour',
 							start: '2017-10-12T17:30:00'
 						},
 						{
 							title: 'Dinner',
 							start: '2017-10-12T20:00:00'
 						},
 						{
 							title: 'Birthday Party',
 							start: '2017-10-13T07:00:00'
 						},
 						{
 							title: 'Click for Google',
 							url: 'http://google.com/',
 							start: '2017-10-28'
 						}
 					],
 					eventRender: function(event, element) {
 						$(element).tooltip({
 							title: event.title,
 							placement: 'auto bottom',
 							viewport: '.fc-body'
 						});             
 					}
 				});
 			});
 		</script>
 		<style>
 			body {
 			margin: 0;
 			padding: 0;
 			font-size: 14px;
 			}

 			#top,
 			#calendar.fc-unthemed {
 				font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
 			}

 			#top {
 				background: #eee;
 				border-bottom: 1px solid #ddd;
 				padding: 0 10px;
 				line-height: 40px;
 				font-size: 12px;
 				color: #000;
 			}

 			#top .selector {
 				display: inline-block;
 				margin-right: 10px;
 			}

 			#top select {
 				font: inherit; /* mock what Boostrap does, don't compete  */
 			}

 			.left { float: left }
 			.right { float: right }
 			.clear { clear: both }

 			#calendar {
 				max-width: 900px;
 				margin: 40px auto;
 				padding: 0 10px;
 			}
 		</style>
 		<link rel="stylesheet" type="text/css" href="https://bootswatch.com/simplex/bootstrap.min.css">
 	</head>
 	<body>
 		<div id="calendar"></div>
 	</body>
 </html>
	<html>
	<!-- https://fullcalendar.io/ -->
	<!-- https://getbootstrap.com/docs/3.3/javascript/#tooltips -->
	<head>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.css"></link>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.print.css" media="print"></link>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.js"></script>

	<script type="text/javascript">
	$(document).ready(function() {
	// page is now ready, initialize the calendar...
	$('#calendar').fullCalendar({
	themeSystem: 'bootstrap3',
	header: {
	left: 'prev,next today',
	center: 'title',
	right: 'month,agendaWeek,agendaDay,listMonth'
	},
	defaultDate: '2017-10-12',
	events: [
	{
	title: 'Foothills of the Spire Event',
	start: '2017-10-01'
	},
	{
	title: 'Long Event',
	start: '2017-10-07',
	end: '2017-10-10'
	},
	{
	id: 999,
	title: 'Repeating Event',
	start: '2017-10-09T16:00:00',
	end: '2017-10-09T17:00:00'
	},
	{
	id: 999,
	title: 'Repeating Event',
	start: '2017-10-16T16:00:00',
	end: '2017-10-09T17:00:00'
	},
	{
	title: 'Conference',
	start: '2017-10-11',
	end: '2017-10-13'
	},
	{
	title: 'Meeting',
	start: '2017-10-12T10:30:00',
	end: '2017-10-12T12:30:00'
	},
	{
	title: 'Lunch',
	start: '2017-10-12T12:00:00'
	},
	{
	title: 'Meeting',
	start: '2017-10-12T14:30:00'
	},
	{
	title: 'Happy Hour',
	start: '2017-10-12T17:30:00'
	},
	{
	title: 'Dinner',
	start: '2017-10-12T20:00:00'
	},
	{
	title: 'Birthday Party',
	start: '2017-10-13T07:00:00'
	},
	{
	title: 'Click for Google',
	url: 'http://google.com/',
	start: '2017-10-28'
	}
	],
	eventRender: function(event, element) {
	$(element).tooltip({
	title: event.title,
	placement: 'auto bottom',
	viewport: '.fc-body'
	});
	}
	});
	});
	</script>
	<style>
	body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	}

	#top,
	#calendar.fc-unthemed {
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	}

	#top {
	background: #eee;
	border-bottom: 1px solid #ddd;
	padding: 0 10px;
	line-height: 40px;
	font-size: 12px;
	color: #000;
	}

	#top .selector {
	display: inline-block;
	margin-right: 10px;
	}

	#top select {
	font: inherit; /* mock what Boostrap does, don't compete */
	}

	.left { float: left }
	.right { float: right }
	.clear { clear: both }

	#calendar {
	max-width: 900px;
	margin: 40px auto;
	padding: 0 10px;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="https://bootswatch.com/simplex/bootstrap.min.css">
	</head>
	<body>
	<div id="calendar"></div>
	</body>
	</html>