feat(timeline): refactor tooltip to only use one dom-element (visjs#2662)

Author: lewisjb

lib/timeline/component/ItemSet.js

@@ -157,6 +157,8 @@ function ItemSet(body, options) {
   this.selection = [];  // list with the ids of all selected nodes
   this.stackDirty = true; // if true, all items will be restacked on next redraw
 
+  this.popup = null;
+
   this.touchParams = {}; // stores properties while dragging
   this.groupTouchParams = {};
   // create the HTML DOM
@@ -889,12 +891,6 @@ ItemSet.prototype.removeItem = function(id) {
         // remove by id here, it is possible that an item has no id defined
         // itself, so better not delete by the item itself
         dataset.remove(id);
-
-        // Remove it's popup
-        if (itemObj.popup) {
-          itemObj.popup.destroy();
-          itemObj.popup = null;
-        }
       }
     });
   }
@@ -1899,17 +1895,26 @@ ItemSet.prototype._onMouseOver = function (event) {
     return;
   }
 
-  if (item.getTitle()) {
-    if (item.popup == null) {
-      item.setPopup(new Popup(this.body.dom.root, this.options.tooltip.overflowMethod || 'flip'));
+  var title = item.getTitle();
+  if (title) {
+    if (this.popup == null) {
+      this.popup = new Popup(this.body.dom.root,
+          this.options.tooltip.overflowMethod || 'flip');
     }
 
+    this.popup.setText(title);
     var container = this.body.dom.centerContainer;
-    item.popup.setPosition(
+    this.popup.setPosition(
       event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft,
       event.clientY - util.getAbsoluteTop(container) + container.offsetTop
     );
-    item.popup.show();
+    this.popup.show();
+  } else {
+    // Hovering over item without a title, hide popup
+    // Needed instead of _just_ in _onMouseOut due to #2572
+    if (this.popup != null) {
+      this.popup.hide();
+    }
   }
 
   this.body.emitter.emit('itemover', {
@@ -1928,8 +1933,8 @@ ItemSet.prototype._onMouseOut = function (event) {
     return;
   }
 
-  if (item.popup != null) {
-    item.popup.hide();
+  if (this.popup != null) {
+    this.popup.hide();
   }
 
   this.body.emitter.emit('itemout', {
@@ -1942,14 +1947,14 @@ ItemSet.prototype._onMouseMove = function (event) {
   if (!item) return;
 
   if (this.options.tooltip.followMouse) {
-    if (item.popup) {
-      if (!item.popup.hidden) {
+    if (this.popup) {
+      if (!this.popup.hidden) {
         var container = this.body.dom.centerContainer;
-        item.popup.setPosition(
+        this.popup.setPosition(
           event.clientX - util.getAbsoluteLeft(container) + container.offsetLeft,
           event.clientY - util.getAbsoluteTop(container) + container.offsetTop
         );
-        item.popup.show(); // Redraw
+        this.popup.show(); // Redraw
       }
     }
   }

lib/timeline/component/item/BackgroundItem.js

@@ -100,7 +100,6 @@ BackgroundItem.prototype.redraw = function() {
   // - the item is selected/deselected
   if (this.dirty) {
     this._updateContents(this.dom.content);
-    this._updateTitle();
     this._updateDataAttributes(this.dom.content);
     this._updateStyle(this.dom.box);
 

lib/timeline/component/item/BoxItem.js

@@ -118,7 +118,6 @@ BoxItem.prototype.redraw = function() {
   // - the item is selected/deselected
   if (this.dirty) {
     this._updateContents(this.dom.content);
-    this._updateTitle();
     this._updateDataAttributes(this.dom.box);
     this._updateStyle(this.dom.box);
 

lib/timeline/component/item/Item.js

@@ -23,7 +23,6 @@ function Item (data, conversion, options) {
   this.displayed = false;
   this.groupShowing = true;
   this.dirty = true;
-  this.popup = null;
 
   this.top = null;
   this.right = null;
@@ -397,18 +396,6 @@ Item.prototype._updateContents = function (element) {
   }
 };
 
-/**
- * Set HTML contents for the item
- * @private
- */
-Item.prototype._updateTitle = function () {
-  if (this.data.title != null) {
-    if (this.popup != null) {
-      this.popup.setText(this.data.title || '');
-    }
-  }
-};
-
 /**
  * Process dataAttributes timeline option and set as data- attributes on dom.content
  * @param {Element} element   HTML element to which the attributes will be attached
@@ -498,13 +485,4 @@ Item.prototype.getTitle = function () {
   return this.data.title;
 };
 
-/**
- * Set the popup object, and update the title
- * @param {Popup} popup
- */
-Item.prototype.setPopup = function (popup) {
-  this.popup = popup;
-  this._updateTitle();
-};
-
 module.exports = Item;

lib/timeline/component/item/PointItem.js

@@ -96,7 +96,6 @@ PointItem.prototype.redraw = function() {
   // - the item is selected/deselected
   if (this.dirty) {
     this._updateContents(this.dom.content);
-    this._updateTitle();
     this._updateDataAttributes(this.dom.point);
     this._updateStyle(this.dom.point);
 

lib/timeline/component/item/RangeItem.js

@@ -100,7 +100,6 @@ RangeItem.prototype.redraw = function() {
   // - the item is selected/deselected
   if (this.dirty) {
     this._updateContents(this.dom.content);
-    this._updateTitle();
     this._updateDataAttributes(this.dom.box);
     this._updateStyle(this.dom.box);