Added support for title for both items and groups

docs/timeline.html

@@ -174,18 +174,27 @@ var items = [
     <th>Description</th>
   </tr>
   <tr>
-    <td>id</td>
-    <td>String | Number</td>
+    <td>className</td>
+    <td>String</td>
     <td>no</td>
-    <td>An id for the item. Using an id is not required but highly
-      recommended. An id is needed when dynamically adding, updating,
-      and removing items in a DataSet.</td>
+    <td>This field is optional. A className can be used to give items
+      an individual css style. For example, when an item has className
+      'red', one can define a css style like:
+      <pre class="prettyprint lang-css">
+.vis.timeline .red {
+  color: white;
+  background-color: red;
+  border-color: darkred;
+}</pre>
+      More details on how to style items can be found in the section
+      <a href="#Styles">Styles</a>.
+    </td>
   </tr>
   <tr>
-    <td>start</td>
-    <td>Date</td>
+    <td>content</td>
+    <td>String</td>
     <td>yes</td>
-    <td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
+    <td>The contents of the item. This can be plain text or html code.</td>
   </tr>
   <tr>
     <td>end</td>
@@ -195,20 +204,6 @@ var items = [
       If end date is provided, the item is displayed as a range.
       If not, the item is displayed as a box.</td>
   </tr>
-  <tr>
-    <td>content</td>
-    <td>String</td>
-    <td>yes</td>
-    <td>The contents of the item. This can be plain text or html code.</td>
-  </tr>
-  <tr>
-    <td>type</td>
-    <td>String</td>
-    <td>'box'</td>
-    <td>The type of the item. Can be 'box' (default), 'point', or 'range'.
-      Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
-    </td>
-  </tr>
   <tr>
     <td>group</td>
     <td>any type</td>
@@ -221,20 +216,33 @@ var items = [
     </td>
   </tr>
   <tr>
-    <td>className</td>
-    <td>String</td>
+    <td>id</td>
+    <td>String | Number</td>
     <td>no</td>
-    <td>This field is optional. A className can be used to give items
-      an individual css style. For example, when an item has className
-      'red', one can define a css style like:
-      <pre class="prettyprint lang-css">
-.vis.timeline .red {
-  color: white;
-  background-color: red;
-  border-color: darkred;
-}</pre>
-      More details on how to style items can be found in the section
-      <a href="#Styles">Styles</a>.
+    <td>An id for the item. Using an id is not required but highly
+      recommended. An id is needed when dynamically adding, updating,
+      and removing items in a DataSet.</td>
+  </tr>
+  <tr>
+    <td>start</td>
+    <td>Date</td>
+    <td>yes</td>
+    <td>The start date of the item, for example <code>new Date(2010,9,23)</code>.</td>
+  </tr>
+  <tr>
+    <td>title</td>
+    <td>String</td>
+    <td>none</td>
+    <td>Add a title for the item, displayed when holding the mouse on the item.
+      The title can only contain plain text.
+    </td>
+  </tr>
+  <tr>
+    <td>type</td>
+    <td>String</td>
+    <td>'box'</td>
+    <td>The type of the item. Can be 'box' (default), 'point', or 'range'.
+      Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
     </td>
   </tr>
 </table>
@@ -276,20 +284,6 @@ var groups = [
     <th>Required</th>
     <th>Description</th>
   </tr>
-  <tr>
-    <td>id</td>
-    <td>String | Number</td>
-    <td>yes</td>
-    <td>An id for the group. The group will display all items having a
-      property <code>group</code> which matches the <code>id</code>
-      of the group.</td>
-  </tr>
-  <tr>
-    <td>content</td>
-    <td>String</td>
-    <td>yes</td>
-    <td>The contents of the group. This can be plain text or html code.</td>
-  </tr>
   <tr>
     <td>className</td>
     <td>String</td>
@@ -306,6 +300,28 @@ var groups = [
       <a href="#Styles">Styles</a>.
     </td>
   </tr>
+  <tr>
+    <td>content</td>
+    <td>String</td>
+    <td>yes</td>
+    <td>The contents of the group. This can be plain text or html code.</td>
+  </tr>
+  <tr>
+    <td>id</td>
+    <td>String | Number</td>
+    <td>yes</td>
+    <td>An id for the group. The group will display all items having a
+      property <code>group</code> which matches the <code>id</code>
+      of the group.</td>
+  </tr>
+  <tr>
+    <td>title</td>
+    <td>String</td>
+    <td>none</td>
+    <td>A title for the group, displayed when holding the mouse the groups label.
+      The title can only contain plain text.
+    </td>
+  </tr>
 </table>
 
 

examples/graph2d/index.html

@@ -1,21 +1,20 @@
 <html>
 <head>
-    <link rel='stylesheet' href='default.css' type='text/css'>
+  <link rel='stylesheet' href='default.css' type='text/css'>
 </head>
 <body>
 <div id="container">
 
-    <h1>Graph2d Examples</h1>
-
-    <p><a href="01_basic.html">01_basic.html</a></p>
-    <p><a href="02_bars.html">02_bars.html</a></p>
-    <p><a href="03_groups.html">03_groups.html</a></p>
-    <p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
-    <p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
-    <p><a href="06_interpolation.html">06_interpolation.html</a></p>
-    <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
-    <p><a href="08_performance.html">08_performance.html</a></p>
+  <h1>Graph2d Examples</h1>
 
+  <p><a href="01_basic.html">01_basic.html</a></p>
+  <p><a href="02_bars.html">02_bars.html</a></p>
+  <p><a href="03_groups.html">03_groups.html</a></p>
+  <p><a href="04_rightAxis.html">04_rightAxis.html</a></p>
+  <p><a href="05_bothAxis.html">05_bothAxis.html</a></p>
+  <p><a href="06_interpolation.html">06_interpolation.html</a></p>
+  <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
+  <p><a href="08_performance.html">08_performance.html</a></p>
 
 </div>
 </body>

src/timeline/component/Group.js

@@ -81,6 +81,9 @@ Group.prototype.setData = function(data) {
     this.dom.inner.innerHTML = this.groupId;
   }
 
+  // update title
+  this.dom.label.title = data && data.title || '';
+
   if (!this.dom.inner.firstChild) {
     util.addClassName(this.dom.inner, 'hidden');
   }

src/timeline/component/ItemSet.js

@@ -1317,3 +1317,4 @@ ItemSet.itemSetFromTarget = function(event) {
 
   return null;
 };
+

src/timeline/component/item/ItemBox.js

@@ -112,6 +112,12 @@ ItemBox.prototype.redraw = function() {
     this.dirty = true;
   }
 
+  // update title
+  if (this.data.title != this.title) {
+    dom.box.title = this.data.title;
+    this.title = this.data.title;
+  }
+
   // update class
   var className = (this.data.className? ' ' + this.data.className : '') +
       (this.selected ? ' selected' : '');

src/timeline/component/item/ItemPoint.js

@@ -102,6 +102,12 @@ ItemPoint.prototype.redraw = function() {
     this.dirty = true;
   }
 
+  // update title
+  if (this.data.title != this.title) {
+    dom.point.title = this.data.title;
+    this.title = this.data.title;
+  }
+
   // update class
   var className = (this.data.className? ' ' + this.data.className : '') +
       (this.selected ? ' selected' : '');

src/timeline/component/item/ItemRange.js

@@ -96,6 +96,12 @@ ItemRange.prototype.redraw = function() {
     this.dirty = true;
   }
 
+  // update title
+  if (this.data.title != this.title) {
+    dom.box.title = this.data.title;
+    this.title = this.data.title;
+  }
+
   // update class
   var className = (this.data.className ? (' ' + this.data.className) : '') +
       (this.selected ? ' selected' : '');

test/timeline.html

@@ -65,16 +65,17 @@
     fieldId: '_id'
   });
   items.add([
-    {_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate()},
+    {_id: 0, content: 'item 0', start: now.clone().add('days', 3).toDate(), title: 'hello title!'},
     {_id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
     {_id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
     {_id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
     {
       _id: 4, content: 'item 4 ',
       start: now.clone().add('days', 0).toDate(),
-      end: now.clone().add('days', 7).toDate()
+      end: now.clone().add('days', 7).toDate(),
+      title: 'hello title!'
     },
-    {_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
+    {_id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point', title: 'hello title!'},
     {_id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
   ]);
 

test/timeline_groups.html

@@ -51,7 +51,7 @@
   var names = ['John (0)', 'Alston (1)', 'Lee (2)', 'Grant (3)'];
   var groups = new vis.DataSet();
   for (var g = 0; g < groupCount; g++) {
-    groups.add({id: g, content: names[g]});
+    groups.add({id: g, content: names[g], title: 'Title of group ' + g});
   }
 
   // create a dataset with items
@@ -65,6 +65,7 @@
       content: 'item ' + i +
           ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
       start: start,
+      title: 'Title for item ' + i,
       type: 'box'
     });
   }