<html> <head> <title>Timeline | Tooltip on item onUpdateTime Option</title> <script src="../../../dist/vis.js"></script> <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .vis-item .vis-onUpdateTime-tooltip { border-radius: 4px; } </style> </head> <body> <h1>Timeline Tooltip on item onUpdateTime Option</h1> <h2>With <code>tooltipOnItemUpdateTime: true</code> </h2> <div id="mytimeline1"></div> <h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code> </h2> <div id="mytimeline2"></div> <h2>With groups</h2> <div id="mytimeline3"></div> <script> // create items var numberOfItems = 10; var items = new vis.DataSet(); var types = [ 'box', 'point', 'range'] for (var order = 0; order < numberOfItems; order++) { var date = vis.moment(); date.add(Math.round(Math.random() * 2), 'hour'); items.add({ id: order, type: types[Math.floor(3 * Math.random())], content: 'Item ' + order, start: date.clone().add(order + 1, 'hour'), end: date.clone().add(order + 3, 'hour') }); } // specify options var options = { multiselect: true, maxHeight: 400, start: new Date((new Date()).valueOf() - 10000000), end: new Date(1000*60*60*24 + (new Date()).valueOf()), editable: true }; var options1 = Object.assign({ tooltipOnItemUpdateTime: true }, options) var container1 = document.getElementById('mytimeline1'); timeline1 = new vis.Timeline(container1, items, null, options1); var options2 = Object.assign({ orientation: 'top', tooltipOnItemUpdateTime: { template: function(item) { return 'html template for tooltip with <b>item.start</b>: ' + item.start; } } }, options) var container2 = document.getElementById('mytimeline2'); timeline2 = new vis.Timeline(container2, items, null, options2); // create groups var numberOfGroups = 25; var groups = new vis.DataSet() for (var i = 0; i < numberOfGroups; i++) { groups.add({ id: i, content: 'Truck ' + i }) } // create items for groups var numberOfItems = 1000; var itemsWithGroups = new vis.DataSet(); var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); for (var truck = 0; truck < numberOfGroups; truck++) { var date = new Date(); for (var order = 0; order < itemsPerGroup; order++) { date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); var start = new Date(date); date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); var end = new Date(date); itemsWithGroups.add({ id: order + itemsPerGroup * truck, group: truck, start: start, end: end, content: 'Order ' + order }); } } var options3 = Object.assign({ orientation: 'top', tooltipOnItemUpdateTime: true }, options) var container3 = document.getElementById('mytimeline3'); timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3); </script> </body> </html>