Fixed #626: added class name 'network-tooltip' to the tooltip, allowing custom styling.

HISTORY.md

@@ -15,6 +15,7 @@ http://visjs.org
 - Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized.
 - Added freezeSimulation method.
 - Added clusterByZoom option.
+- Added class name 'network-tooltip' to the tooltip, allowing custom styling.
 - Fixed bug when redrawing was not right on zoomed-out browsers.
 - Added opacity option to edges. Opacity is only used for the unselected state.
 - Fixed bug where selections from removed data elements persisted.

dist/vis.css

@@ -791,4 +791,17 @@ div.network-navigation.zoomExtends {
     background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;
+}
+div.network-tooltip {
+  position: absolute;
+  visibility: hidden;
+  padding: 5px;
+  white-space: nowrap;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid;
+
+  box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
 }

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 3.9.2-SNAPSHOT
- * @date    2015-02-10
+ * @date    2015-02-11
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -21220,21 +21220,13 @@ return /******/ (function(modules) { // webpackBootstrap
     }
 
     // create the frame
-    this.frame = document.createElement("div");
-    var styleAttr = this.frame.style;
-    styleAttr.position = "absolute";
-    styleAttr.visibility = "hidden";
-    styleAttr.border = "1px solid " + style.color.border;
-    styleAttr.color = style.fontColor;
-    styleAttr.fontSize = style.fontSize + "px";
-    styleAttr.fontFamily = style.fontFace;
-    styleAttr.padding = this.padding + "px";
-    styleAttr.backgroundColor = style.color.background;
-    styleAttr.borderRadius = "3px";
-    styleAttr.MozBorderRadius = "3px";
-    styleAttr.WebkitBorderRadius = "3px";
-    styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-    styleAttr.whiteSpace = "nowrap";
+    this.frame = document.createElement('div');
+    this.frame.className = 'network-tooltip';
+    this.frame.style.color           = style.fontColor;
+    this.frame.style.backgroundColor = style.color.background;
+    this.frame.style.borderColor     = style.color.border;
+    this.frame.style.fontSize        = style.fontSize + 'px';
+    this.frame.style.fontFamily      = style.fontFace;
     this.container.appendChild(this.frame);
   }
 

gulpfile.js

@@ -97,7 +97,8 @@ gulp.task('bundle-css', ['clean'], function () {
     './lib/timeline/component/css/pathStyles.css',
 
     './lib/network/css/network-manipulation.css',
-    './lib/network/css/network-navigation.css'
+    './lib/network/css/network-navigation.css',
+    './lib/network/css/network-tooltip.css'
   ];
 
   return gulp.src(files)

lib/network/Popup.js

@@ -49,21 +49,13 @@ function Popup(container, x, y, text, style) {
   }
 
   // create the frame
-  this.frame = document.createElement("div");
-  var styleAttr = this.frame.style;
-  styleAttr.position = "absolute";
-  styleAttr.visibility = "hidden";
-  styleAttr.border = "1px solid " + style.color.border;
-  styleAttr.color = style.fontColor;
-  styleAttr.fontSize = style.fontSize + "px";
-  styleAttr.fontFamily = style.fontFace;
-  styleAttr.padding = this.padding + "px";
-  styleAttr.backgroundColor = style.color.background;
-  styleAttr.borderRadius = "3px";
-  styleAttr.MozBorderRadius = "3px";
-  styleAttr.WebkitBorderRadius = "3px";
-  styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
-  styleAttr.whiteSpace = "nowrap";
+  this.frame = document.createElement('div');
+  this.frame.className = 'network-tooltip';
+  this.frame.style.color           = style.fontColor;
+  this.frame.style.backgroundColor = style.color.background;
+  this.frame.style.borderColor     = style.color.border;
+  this.frame.style.fontSize        = style.fontSize + 'px';
+  this.frame.style.fontFamily      = style.fontFace;
   this.container.appendChild(this.frame);
 }
 

lib/network/css/network-tooltip.css

@@ -0,0 +1,13 @@
+div.network-tooltip {
+  position: absolute;
+  visibility: hidden;
+  padding: 5px;
+  white-space: nowrap;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid;
+
+  box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
+}