vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
50 lines (40 loc) • 1.12 kB
HTML
<html>
<head>
<title>Timeline | Tooltip Template</title>
<style type="text/css">
body, html {
font-family: sans-serif;
max-width: 800px;
}
</style>
<script src="../../../dist/vis-timeline-graph2d.min.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tooltip Templates</h1>
<div id="visualization"></div>
<script type="text/javascript">
var items = new vis.DataSet([{
id: 1,
content: 'Item with custom tooltip',
start: '2016-01-02',
end: '2016-01-03',
title: 'IN_PROGRESS'
}]);
var options = {
start: '2016-01-01',
end: '2016-01-04',
tooltip: {
template: function(originalItemData, parsedItemData) {
var color = originalItemData.title == 'IN_PROGRESS' ? 'red' : 'green';
return `<span style="color:${color}">${originalItemData.title}</span>`;
}
}
};
var element = document.getElementById('visualization');
// Timeline object
var timelineTooltips = new vis.Timeline(element, items, options);
</script>
</body>
</html>