diff --git a/HISTORY.md b/HISTORY.md
index 4b13ff48..eefaf59e 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -16,7 +16,7 @@ http://visjs.org
### Timeline
-- Implemented support for attaching HTML attributes to items.
+- Implemented support for attaching HTML attributes to items. Thanks @dturkenk.
- Fixed moment.js url in localization example.
- Fixed `className` of groups not being updated when changed.
- Fixed the `id` field of a new item not correctly generated.
diff --git a/docs/timeline.html b/docs/timeline.html
index 94348bbf..34e01572 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -382,7 +382,7 @@ var options = {
dataAttributes |
Array[String] |
false |
- An array of fields optionally defined on the timeline items that will be appended as data- attributes to the content element. |
+ An array of fields optionally defined on the timeline items that will be appended as data- attributes to the DOM element of the items. |
diff --git a/examples/timeline/03_a_lot_of_data.html b/examples/timeline/03_performance.html
similarity index 100%
rename from examples/timeline/03_a_lot_of_data.html
rename to examples/timeline/03_performance.html
diff --git a/examples/timeline/14_a_lot_of_grouped_data.html b/examples/timeline/14_group_performance.html
similarity index 100%
rename from examples/timeline/14_a_lot_of_grouped_data.html
rename to examples/timeline/14_group_performance.html
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
index 6f3dc027..be896834 100644
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@@ -14,7 +14,7 @@
01_basic.html
02_dataset.html
- 03_a_lot_of_data.html
+ 03_performance.html
04_html_data.html
05_groups.html
06_event_listeners.html
@@ -25,7 +25,7 @@
11_points.html
12_custom_styling.html
13_past_and_future.html
- 14_a_lot_of_grouped_data.html
+ 14_group_performance.html
15_item_class_names.html
16_navigation_menu.html
17_data_serialization.html
diff --git a/lib/timeline/component/item/ItemBox.js b/lib/timeline/component/item/ItemBox.js
index 4a63e959..5555ba11 100644
--- a/lib/timeline/component/item/ItemBox.js
+++ b/lib/timeline/component/item/ItemBox.js
@@ -104,11 +104,9 @@ ItemBox.prototype.redraw = function() {
// - the item's data is changed
// - the item is selected/deselected
if (this.dirty) {
- // update contents
this._updateContents(this.dom.content);
-
- // update title
this._updateTitle(this.dom.box);
+ this._updateDataAttributes(this.dom.box);
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
@@ -117,9 +115,6 @@ ItemBox.prototype.redraw = function() {
dom.line.className = 'item line' + className;
dom.dot.className = 'item dot' + className;
- // update data attributes
- this._updateDataAttributes(this.dom.box);
-
// recalculate size
this.props.dot.height = dom.dot.offsetHeight;
this.props.dot.width = dom.dot.offsetWidth;
diff --git a/lib/timeline/component/item/ItemPoint.js b/lib/timeline/component/item/ItemPoint.js
index f9af5f6d..25892558 100644
--- a/lib/timeline/component/item/ItemPoint.js
+++ b/lib/timeline/component/item/ItemPoint.js
@@ -94,11 +94,9 @@ ItemPoint.prototype.redraw = function() {
// - the item's data is changed
// - the item is selected/deselected
if (this.dirty) {
- // update contents
this._updateContents(this.dom.content);
-
- // update title
this._updateTitle(this.dom.point);
+ this._updateDataAttributes(this.dom.point);
// update class
var className = (this.data.className? ' ' + this.data.className : '') +
@@ -106,9 +104,6 @@ ItemPoint.prototype.redraw = function() {
dom.point.className = 'item point' + className;
dom.dot.className = 'item dot' + className;
- // attach HTML attributes
- this._updateDataAttributes(this.dom.point);
-
// recalculate size
this.width = dom.point.offsetWidth;
this.height = dom.point.offsetHeight;
diff --git a/lib/timeline/component/item/ItemRange.js b/lib/timeline/component/item/ItemRange.js
index 63dfb30c..27b0eec9 100644
--- a/lib/timeline/component/item/ItemRange.js
+++ b/lib/timeline/component/item/ItemRange.js
@@ -89,19 +89,15 @@ ItemRange.prototype.redraw = function() {
// - the item's data is changed
// - the item is selected/deselected
if (this.dirty) {
- // update contents
this._updateContents(this.dom.content);
-
- // update title
this._updateTitle(this.dom.box);
+ this._updateDataAttributes(this.dom.box);
// update class
var className = (this.data.className ? (' ' + this.data.className) : '') +
(this.selected ? ' selected' : '');
dom.box.className = this.baseClassName + className;
- this._updateDataAttributes(this.dom.box);
-
// determine from css whether this box has overflow
this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';