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