|
|
- <!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" />
- <script src="../../googleAnalytics.js"></script>
- </head>
- <body>
-
- <h1>Tooltips</h1>
-
- <p>
- Setting the tooltip in various ways.
- </p>
-
- <div id="tooltips"></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
- );
- </script>
-
- </body>
- </html>
|
