title: Passing data from attribute values into tooltip
body: <p>I'm trying to create a timeline containing items which have certain attributes which then need to be displayed inside a tooltip when hovering over the corresponding item. I have got the timeline to work (I used <a href="http://visjs.org/docs/timeline/" rel="nofollow">vis.js</a>), but can't get the attribute values to display (dynamically) in the tooltips for each item. I have been trying to use tipped.js, the documentation for this can be found <a href="http://www.tippedjs.com/documentation" rel="nofollow">here</a>. Judging by the documentation it should certainly be possible, but my knowledge of jQuery/Javascript is not extensive enough to do it... Could someone help with this?</p>
  
  <p>The HTML I have now can be viewed below. I have included a separate script tag at the bottom of the body for the tooltip code. Right now all the tooltips display the text defined in this code. The attributes I want to be displayed for each tooltip are content, start, end, object, subject (as defined in the datasat for the timeline), preferably in the form of a table. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Test1&lt;/title&gt;
  &lt;script type="text/javascript" src="include/vis.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="include/jquery-1.12.3.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="include/tipped.js"&gt;&lt;/script&gt;
  &lt;link href="include/style.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="include/vis.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="include/tipped.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="header"&gt;
   &lt;div id="menu"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  
   &lt;div id="tabmenu"&gt;
       &amp;nbsp;
      &lt;/div&gt;
      
      &lt;div id="timeline-block"&gt;
       &lt;h2&gt;Timeline&lt;/h2&gt;
          &lt;div id="timeline"&gt;
                  &lt;div class="menu"&gt;
                      &lt;input type="button" id="zoomIn" value="Zoom in"/&gt;
                      &lt;input type="button" id="zoomOut" value="Zoom out"/&gt;
                      &lt;input type="button" id="moveLeft" value="Move right"/&gt;
                      &lt;input type="button" id="moveRight" value="Move left"/&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    // DOM element where the Timeline will be attached
    var container = document.getElementById('timeline');
  
    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
      {id: 1, content: 'Versie 1.0', start: '2015-01-01', end: '2016-01-01', subject: 'Name1', object: 'Car'},
   {id: 2, content: 'Versie 2.0', start: '2016-01-01', end: '2016-05-18', className: 'suspended', subject: 'Name2', object: 'Car'},
   {id: 3, content: 'Versie 3.0', start: '2016-05-18', end: '2016-12-29', className: 'current', subject: 'Name3', object: 'Car'},
    ]);
  
    // Configuration for the Timeline
    var options = {
     width: '100%',
     rtl: true,
     showCurrentTime: true,
     stack: false,
     zoomMax: 150000000000,
     zoomMin: 200,
     dataAttributes: 'all'
     };
  
    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
   
    
    /**NAVIGATION BUTTONS
       * Move the timeline a given percentage to left or right
       * @param {Number} percentage   For example 0.1 (left) or -0.1 (right)
       */
      function move (percentage) {
          var range = timeline.getWindow();
          var interval = range.end - range.start;
          timeline.setWindow({
              start: range.start.valueOf() - interval * percentage,
              end:   range.end.valueOf()   - interval * percentage
          });
      }
      /**
       * Zoom the timeline a given percentage in or out
       * @param {Number} percentage   For example 0.1 (zoom out) or -0.1 (zoom in)
       */
      function zoom (percentage) {
          var range = timeline.getWindow();
          var interval = range.end - range.start;
          timeline.setWindow({
              start: range.start.valueOf() - interval * percentage,
              end:   range.end.valueOf()   + interval * percentage
          });
      }
      // attach events to the navigation buttons
      document.getElementById('zoomIn').onclick    = function () { zoom(-0.2); };
      document.getElementById('zoomOut').onclick   = function () { zoom( 0.2); };
      document.getElementById('moveLeft').onclick  = function () { move( 0.2); };
      document.getElementById('moveRight').onclick = function () { move(-0.2); };
   
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
     
      Tipped.create('.vis-item', 'Some tooltip text');
   
    });
  &lt;/script&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>