<!DOCTYPE HTML> <html> <head> <title>Timeline | Tooltips</title> <style type="text/css"> body, html { font-family: sans-serif; max-width: 800px; } </style> <script src="../../../dist/vis.js"></script> <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Tooltips</h1> <p> Setting the tooltip in various ways. </p> <div id="tooltips"></div> <p> The example below has the tooltip follow the mouse. </p> <div id="tooltips-follow"></div> <p> The example below has the tooltip overflow set to 'cap'. Compare this to the one above, to see how they differ. For the best results, move the cursor to the top right, where the tool-tip is going to overflow out of the timeline. </p> <div id="tooltips-cap"></div> <script type="text/javascript"> // Create a DataSet (allows two way data-binding) var items = new vis.DataSet([ {id: 1, content: 'Item 1', start: '2016-01-01', end: '2016-01-02', title: 'Normal text'}, {id: 2, content: 'Item 2', start: '2016-01-02', title: '<b>Bold</b>'}, {id: 3, content: 'Item 3', start: '2016-01-03', type: 'point', title: '<span style="color: red">Red</span> text'}, {id: 4, content: '<h1>HTML</h1> Item', start: '2016-01-03', end: '2016-01-04', title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'} ]); // Options var options = {}; // Timeline object var timelineTooltips = new vis.Timeline(document.getElementById('tooltips'), items, options ); // Follow options var follow_options = { tooltip: { followMouse: true } }; var timelineFollow = new vis.Timeline(document.getElementById('tooltips-follow'), items, follow_options); // Cap options var cap_options = { tooltip: { followMouse: true, overflowMethod: 'cap' } } var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'), items, cap_options); </script> </body> </html>