I'm trying to create a timeline containing items which have certain attributes which then need to be displayed inside a tooltip when hovering over the corresponding item. I have got the timeline to work (I used vis.js), but can't get the attribute values to display (dynamically) in the tooltips for each item. I have been trying to use tipped.js, the documentation for this can be found here. Judging by the documentation it should certainly be possible, but my knowledge of jQuery/Javascript is not extensive enough to do it... Could someone help with this?
The HTML I have now can be viewed below. I have included a separate script tag at the bottom of the body for the tooltip code. Right now all the tooltips display the text defined in this code. The attributes I want to be displayed for each tooltip are content, start, end, object, subject (as defined in the datasat for the timeline), preferably in the form of a table.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test1</title>
<script type="text/javascript" src="include/vis.js"></script>
<script type="text/javascript" src="include/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="include/tipped.js"></script>
<link href="include/style.css" rel="stylesheet" type="text/css">
<link href="include/vis.css" rel="stylesheet" type="text/css">
<link href="include/tipped.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="menu"> </div>
</div>
<div id="container">
<div id="tabmenu">
</div>
<div id="timeline-block">
<h2>Timeline</h2>
<div id="timeline">
<div class="menu">
<input type="button" id="zoomIn" value="Zoom in"/>
<input type="button" id="zoomOut" value="Zoom out"/>
<input type="button" id="moveLeft" value="Move right"/>
<input type="button" id="moveRight" value="Move left"/>
</div>
</div>
</div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('timeline');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'Versie 1.0', start: '2015-01-01', end: '2016-01-01', subject: 'Name1', object: 'Car'},
{id: 2, content: 'Versie 2.0', start: '2016-01-01', end: '2016-05-18', className: 'suspended', subject: 'Name2', object: 'Car'},
{id: 3, content: 'Versie 3.0', start: '2016-05-18', end: '2016-12-29', className: 'current', subject: 'Name3', object: 'Car'},
]);
// Configuration for the Timeline
var options = {
width: '100%',
rtl: true,
showCurrentTime: true,
stack: false,
zoomMax: 150000000000,
zoomMin: 200,
dataAttributes: 'all'
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
/**NAVIGATION BUTTONS
* Move the timeline a given percentage to left or right
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
*/
function move (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() - interval * percentage
});
}
/**
* Zoom the timeline a given percentage in or out
* @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in)
*/
function zoom (percentage) {
var range = timeline.getWindow();
var interval = range.end - range.start;
timeline.setWindow({
start: range.start.valueOf() - interval * percentage,
end: range.end.valueOf() + interval * percentage
});
}
// attach events to the navigation buttons
document.getElementById('zoomIn').onclick = function () { zoom(-0.2); };
document.getElementById('zoomOut').onclick = function () { zoom( 0.2); };
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
document.getElementById('moveRight').onclick = function () { move(-0.2); };
</script>
<script type="text/javascript">
$(document).ready(function() {
Tipped.create('.vis-item', 'Some tooltip text');
});
</script>
</div>
</body>
</html>A function can be used as content for the tooltip. It should return the content to be pushed into the tooltip. The first argument within the function refers to the element the tooltip was created for:
http://www.tippedjs.com/documentation#usage_functions
Tipped.create('.vis-item', function(e) {
var itemId = $(e).attr('data-id');
var item = items.get(itemId);
return {
title: item.object + ' ' + item.subject,
content: item.content
}
}, {
cache: false
});