- <!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>
|
