added popup to configurator to explain the behaviour

dist/vis.css

@@ -20,6 +20,289 @@
   width: auto;
 }
 
+div.vis-configuration {
+    position:relative;
+    display:block;
+    float:left;
+    font-size:12px;
+}
+
+div.vis-configuration-wrapper {
+    display:block;
+    width:700px;
+}
+
+
+div.vis-configuration.vis-config-option-container{
+    display:block;
+    width:495px;
+    background-color: #ffffff;
+    border:2px solid #f7f8fa;
+    border-radius:4px;
+    margin-top:20px;
+    left:10px;
+    padding-left:5px;
+}
+
+div.vis-configuration.vis-config-button{
+    display:block;
+    width:495px;
+    height:25px;
+    vertical-align: middle;
+    line-height:25px;
+    background-color: #f7f8fa;
+    border:2px solid #ceced0;
+    border-radius:4px;
+    margin-top:20px;
+    left:10px;
+    padding-left:5px;
+    cursor: pointer;
+    margin-bottom:30px;
+}
+
+div.vis-configuration.vis-config-button.hover{
+    background-color: #4588e6;
+    border:2px solid #214373;
+    color:#ffffff;
+}
+
+div.vis-configuration.vis-config-item{
+    display:block;
+    float:left;
+    width:495px;
+    height:25px;
+    vertical-align: middle;
+    line-height:25px;
+}
+
+
+div.vis-configuration.vis-config-item.vis-config-s2{
+    left:10px;
+    background-color: #f7f8fa;
+    padding-left:5px;
+    border-radius:3px;
+}
+div.vis-configuration.vis-config-item.vis-config-s3{
+    left:20px;
+    background-color: #e4e9f0;
+    padding-left:5px;
+    border-radius:3px;
+}
+div.vis-configuration.vis-config-item.vis-config-s4{
+    left:30px;
+    background-color: #cfd8e6;
+    padding-left:5px;
+    border-radius:3px;
+}
+
+div.vis-configuration.vis-config-header{
+    font-size:18px;
+    font-weight: bold;
+}
+
+div.vis-configuration.vis-config-label{
+    width:120px;
+    height:25px;
+    line-height: 25px;
+}
+
+div.vis-configuration.vis-config-label.vis-config-s3{
+    width:110px;
+}
+div.vis-configuration.vis-config-label.vis-config-s4{
+    width:100px;
+}
+
+div.vis-configuration.vis-config-colorBlock{
+    top:1px;
+    width:30px;
+    height:19px;
+    border:1px solid #444444;
+    border-radius:2px;
+    padding:0px;
+    margin:0px;
+    cursor:pointer;
+}
+
+input.vis-configuration.vis-config-checkbox {
+    left:-5px;
+}
+
+
+input.vis-configuration.vis-config-rangeinput{
+    position:relative;
+    top:-5px;
+    width:60px;
+    height:13px;
+    padding:1px;
+    margin:0;
+    pointer-events:none;
+}
+
+input.vis-configuration.vis-config-range{
+    /*removes default webkit styles*/
+    -webkit-appearance: none;
+
+    /*fix for FF unable to apply focus style bug */
+    border: 0px solid white;
+    background-color:rgba(0,0,0,0);
+
+    /*required for proper track sizing in FF*/
+    width: 300px;
+    height:20px;
+}
+input.vis-configuration.vis-config-range::-webkit-slider-runnable-track {
+    width: 300px;
+    height: 5px;
+    background: #dedede; /* Old browsers */
+    background: -moz-linear-gradient(top,  #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* IE10+ */
+    background: linear-gradient(to bottom,  #dedede 0%,#c8c8c8 99%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
+
+    border: 1px solid #999999;
+    box-shadow: #aaaaaa 0px 0px 3px 0px;
+    border-radius: 3px;
+}
+input.vis-configuration.vis-config-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 1px solid #14334b;
+    height: 17px;
+    width: 17px;
+    border-radius: 50%;
+    background: #3876c2; /* Old browsers */
+    background: -moz-linear-gradient(top,  #3876c2 0%, #385380 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #3876c2 0%,#385380 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #3876c2 0%,#385380 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #3876c2 0%,#385380 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
+    box-shadow: #111927 0px 0px 1px 0px;
+    margin-top: -7px;
+}
+input.vis-configuration.vis-config-range:focus {
+    outline: none;
+}
+input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track {
+    background: #9d9d9d; /* Old browsers */
+    background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
+    background: linear-gradient(to bottom,  #9d9d9d 0%,#c8c8c8 99%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
+}
+
+input.vis-configuration.vis-config-range::-moz-range-track {
+    width: 300px;
+    height: 10px;
+    background: #dedede; /* Old browsers */
+    background: -moz-linear-gradient(top,  #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* IE10+ */
+    background: linear-gradient(to bottom,  #dedede 0%,#c8c8c8 99%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
+
+    border: 1px solid #999999;
+    box-shadow: #aaaaaa 0px 0px 3px 0px;
+    border-radius: 3px;
+}
+input.vis-configuration.vis-config-range::-moz-range-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+
+    border-radius: 50%;
+    background:  #385380;
+}
+
+/*hide the outline behind the border*/
+input.vis-configuration.vis-config-range:-moz-focusring{
+    outline: 1px solid white;
+    outline-offset: -1px;
+}
+
+input.vis-configuration.vis-config-range::-ms-track {
+    width: 300px;
+    height: 5px;
+
+    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+    background: transparent;
+
+    /*leave room for the larger thumb to overflow with a transparent border */
+    border-color: transparent;
+    border-width: 6px 0;
+
+    /*remove default tick marks*/
+    color: transparent;
+}
+input.vis-configuration.vis-config-range::-ms-fill-lower {
+    background: #777;
+    border-radius: 10px;
+}
+input.vis-configuration.vis-config-range::-ms-fill-upper {
+    background: #ddd;
+    border-radius: 10px;
+}
+input.vis-configuration.vis-config-range::-ms-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background:  #385380;
+}
+input.vis-configuration.vis-config-range:focus::-ms-fill-lower {
+    background: #888;
+}
+input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
+    background: #ccc;
+}
+
+.vis-configuration-popup {
+    position: absolute;
+    background: rgba(57, 76, 89, 0.85);
+    border: 2px solid #f2faff;
+    line-height:30px;
+    height:30px;
+    width:150px;
+    text-align:center;
+    color: #ffffff;
+    font-size:14px;
+    border-radius:4px;
+    -webkit-transition: opacity 0.3s ease-in-out;
+    -moz-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out;
+}
+.vis-configuration-popup:after, .vis-configuration-popup:before {
+    left: 100%;
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.vis-configuration-popup:after {
+    border-color: rgba(136, 183, 213, 0);
+    border-left-color: rgba(57, 76, 89, 0.85);
+    border-width: 8px;
+    margin-top: -8px;
+}
+.vis-configuration-popup:before {
+    border-color: rgba(194, 225, 245, 0);
+    border-left-color: #f2faff;
+    border-width: 12px;
+    margin-top: -12px;
+}
 
 .vis-timeline {
   position: relative;
@@ -754,6 +1037,25 @@ div.network-navigation_wrapper {
   height: 100%;
 }
 */
+div.vis-network-tooltip {
+  position: absolute;
+  visibility: hidden;
+  padding: 5px;
+  white-space: nowrap;
+
+  font-family: verdana;
+  font-size:14px;
+  font-color:#000000;
+  background-color: #f5f4ed;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid #808074;
+
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
 div.vis-network div.vis-navigation div.vis-button {
     width:34px;
     height:34px;
@@ -815,269 +1117,6 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
     bottom:50px;
     right:15px;
 }
-div.vis-network-tooltip {
-  position: absolute;
-  visibility: hidden;
-  padding: 5px;
-  white-space: nowrap;
-
-  font-family: verdana;
-  font-size:14px;
-  font-color:#000000;
-  background-color: #f5f4ed;
-
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  border: 1px solid #808074;
-
-  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
-  pointer-events: none;
-}
-div.vis-network-configuration {
-    position:relative;
-    display:block;
-    float:left;
-    font-size:12px;
-}
-
-div.vis-network-configuration-wrapper {
-    display:block;
-    width:700px;
-}
-
-
-div.vis-network-configuration.vis-option-container{
-    display:block;
-    width:495px;
-    background-color: #ffffff;
-    border:2px solid #f7f8fa;
-    border-radius:4px;
-    margin-top:20px;
-    left:10px;
-    padding-left:5px;
-}
-
-div.vis-network-configuration.button{
-    display:block;
-    width:495px;
-    height:25px;
-    vertical-align: middle;
-    line-height:25px;
-    background-color: #f7f8fa;
-    border:2px solid #ceced0;
-    border-radius:4px;
-    margin-top:20px;
-    left:10px;
-    padding-left:5px;
-    cursor: pointer;
-    margin-bottom:30px;
-}
-
-div.vis-network-configuration.button.hover{
-    background-color: #4588e6;
-    border:2px solid #214373;
-    color:#ffffff;
-}
-
-div.vis-network-configuration.item{
-    display:block;
-    float:left;
-    width:495px;
-    height:25px;
-    vertical-align: middle;
-    line-height:25px;
-}
-
-
-div.vis-network-configuration.item.s2{
-    left:10px;
-    background-color: #f7f8fa;
-    padding-left:5px;
-    border-radius:3px;
-}
-div.vis-network-configuration.item.s3{
-    left:20px;
-    background-color: #e4e9f0;
-    padding-left:5px;
-    border-radius:3px;
-}
-div.vis-network-configuration.item.s4{
-    left:30px;
-    background-color: #cfd8e6;
-    padding-left:5px;
-    border-radius:3px;
-}
-
-div.vis-network-configuration.header{
-    font-size:18px;
-    font-weight: bold;
-}
-
-div.vis-network-configuration.label{
-    width:120px;
-    height:25px;
-    line-height: 25px;
-}
-
-div.vis-network-configuration.label.s3{
-    width:110px;
-}
-div.vis-network-configuration.label.s4{
-    width:100px;
-}
-
-div.vis-network-configuration.colorBlock{
-    top:1px;
-    width:30px;
-    height:19px;
-    border:1px solid #444444;
-    border-radius:2px;
-    padding:0px;
-    margin:0px;
-    cursor:pointer;
-}
-
-input.vis-network-configuration.checkbox {
-    left:-5px;
-}
-
-
-input.vis-network-configuration.rangeinput{
-    position:relative;
-    top:-5px;
-    width:60px;
-    height:13px;
-    padding:1px;
-    margin:0;
-    pointer-events:none;
-}
-
-input.vis-network-configuration.range{
-    /*removes default webkit styles*/
-    -webkit-appearance: none;
-
-    /*fix for FF unable to apply focus style bug */
-    border: 0px solid white;
-    background-color:rgba(0,0,0,0);
-
-    /*required for proper track sizing in FF*/
-    width: 300px;
-    height:20px;
-}
-input.vis-network-configuration.range::-webkit-slider-runnable-track {
-    width: 300px;
-    height: 5px;
-    background: #dedede; /* Old browsers */
-    background: -moz-linear-gradient(top,  #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* IE10+ */
-    background: linear-gradient(to bottom,  #dedede 0%,#c8c8c8 99%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
-
-    border: 1px solid #999999;
-    box-shadow: #aaaaaa 0px 0px 3px 0px;
-    border-radius: 3px;
-}
-input.vis-network-configuration.range::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: 1px solid #14334b;
-    height: 17px;
-    width: 17px;
-    border-radius: 50%;
-    background: #3876c2; /* Old browsers */
-    background: -moz-linear-gradient(top,  #3876c2 0%, #385380 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #3876c2 0%,#385380 100%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #3876c2 0%,#385380 100%); /* IE10+ */
-    background: linear-gradient(to bottom,  #3876c2 0%,#385380 100%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
-    box-shadow: #111927 0px 0px 1px 0px;
-    margin-top: -7px;
-}
-input.vis-network-configuration.range:focus {
-    outline: none;
-}
-input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
-    background: #9d9d9d; /* Old browsers */
-    background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top,  #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
-    background: linear-gradient(to bottom,  #9d9d9d 0%,#c8c8c8 99%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
-}
-
-input.vis-network-configuration.range::-moz-range-track {
-    width: 300px;
-    height: 10px;
-    background: #dedede; /* Old browsers */
-    background: -moz-linear-gradient(top,  #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
-    background: -ms-linear-gradient(top,  #dedede 0%,#c8c8c8 99%); /* IE10+ */
-    background: linear-gradient(to bottom,  #dedede 0%,#c8c8c8 99%); /* W3C */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
-
-    border: 1px solid #999999;
-    box-shadow: #aaaaaa 0px 0px 3px 0px;
-    border-radius: 3px;
-}
-input.vis-network-configuration.range::-moz-range-thumb {
-    border: none;
-    height: 16px;
-    width: 16px;
-
-    border-radius: 50%;
-    background:  #385380;
-}
-
-/*hide the outline behind the border*/
-input.vis-network-configuration.range:-moz-focusring{
-    outline: 1px solid white;
-    outline-offset: -1px;
-}
-
-input.vis-network-configuration.range::-ms-track {
-    width: 300px;
-    height: 5px;
-
-    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
-    background: transparent;
-
-    /*leave room for the larger thumb to overflow with a transparent border */
-    border-color: transparent;
-    border-width: 6px 0;
-
-    /*remove default tick marks*/
-    color: transparent;
-}
-input.vis-network-configuration.range::-ms-fill-lower {
-    background: #777;
-    border-radius: 10px;
-}
-input.vis-network-configuration.range::-ms-fill-upper {
-    background: #ddd;
-    border-radius: 10px;
-}
-input.vis-network-configuration.range::-ms-thumb {
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background:  #385380;
-}
-input.vis-network-configuration.range:focus::-ms-fill-lower {
-    background: #888;
-}
-input.vis-network-configuration.range:focus::-ms-fill-upper {
-    background: #ccc;
-}
 
 div.vis-color-picker {
   position:absolute;

dist/vis.js

@@ -21419,6 +21419,8 @@ return /******/ (function(modules) { // webpackBootstrap
       this.allowCreation = false;
 
       this.options = {};
+      this.initialized = false;
+      this.popupCounter = 0;
       this.defaultOptions = {
         enabled: false,
         filter: true,
@@ -21430,6 +21432,9 @@ return /******/ (function(modules) { // webpackBootstrap
       this.configureOptions = configureOptions;
       this.moduleOptions = {};
       this.domElements = [];
+      this.popupDiv = {};
+      this.popupLimit = 5;
+      this.popupHistory = {};
       this.colorPicker = new _ColorPicker2['default'](pixelRatio);
       this.wrapper = undefined;
     }
@@ -21445,6 +21450,10 @@ return /******/ (function(modules) { // webpackBootstrap
       key: 'setOptions',
       value: function setOptions(options) {
         if (options !== undefined) {
+          // reset the popup history because the indices may have been changed.
+          this.popupHistory = {};
+          this._removePopup();
+
           var enabled = true;
           if (typeof options === 'string') {
             this.options.filter = options;
@@ -21537,20 +21546,20 @@ return /******/ (function(modules) { // webpackBootstrap
         if (this.options.showButton === true) {
           (function () {
             var generateButton = document.createElement('div');
-            generateButton.className = 'vis-network-configuration button';
+            generateButton.className = 'vis-configuration vis-config-button';
             generateButton.innerHTML = 'generate options';
             generateButton.onclick = function () {
               _this._printOptions();
             };
             generateButton.onmouseover = function () {
-              generateButton.className = 'vis-network-configuration button hover';
+              generateButton.className = 'vis-configuration vis-config-button hover';
             };
             generateButton.onmouseout = function () {
-              generateButton.className = 'vis-network-configuration button';
+              generateButton.className = 'vis-configuration vis-config-button';
             };
 
             _this.optionsContainer = document.createElement('div');
-            _this.optionsContainer.className = 'vis-network-configuration vis-option-container';
+            _this.optionsContainer.className = 'vis-configuration vis-config-option-container';
 
             _this.domElements.push(_this.optionsContainer);
             _this.domElements.push(generateButton);
@@ -21569,11 +21578,13 @@ return /******/ (function(modules) { // webpackBootstrap
       key: '_push',
       value: function _push() {
         this.wrapper = document.createElement('div');
-        this.wrapper.className = 'vis-network-configuration-wrapper';
+        this.wrapper.className = 'vis-configuration-wrapper';
         this.container.appendChild(this.wrapper);
         for (var i = 0; i < this.domElements.length; i++) {
           this.wrapper.appendChild(this.domElements[i]);
         }
+
+        this._showPopupIfNeeded();
       }
 
       /**
@@ -21592,6 +21603,8 @@ return /******/ (function(modules) { // webpackBootstrap
           this.wrapper = undefined;
         }
         this.domElements = [];
+
+        this._removePopup();
       }
 
       /**
@@ -21630,9 +21643,9 @@ return /******/ (function(modules) { // webpackBootstrap
         if (this.allowCreation === true) {
           var _len, domElements, _key;
 
-          (function () {
+          var _ret2 = (function () {
             var item = document.createElement('div');
-            item.className = 'vis-network-configuration item s' + path.length;
+            item.className = 'vis-configuration vis-config-item vis-config-s' + path.length;
 
             for (_len = _arguments.length, domElements = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
               domElements[_key - 1] = _arguments[_key];
@@ -21642,8 +21655,14 @@ return /******/ (function(modules) { // webpackBootstrap
               item.appendChild(element);
             });
             _this2.domElements.push(item);
+            return {
+              v: _this2.domElements.length
+            };
           })();
+
+          if (typeof _ret2 === 'object') return _ret2.v;
         }
+        return 0;
       }
 
       /**
@@ -21655,7 +21674,7 @@ return /******/ (function(modules) { // webpackBootstrap
       key: '_makeHeader',
       value: function _makeHeader(name) {
         var div = document.createElement('div');
-        div.className = 'vis-network-configuration header';
+        div.className = 'vis-configuration vis-config-header';
         div.innerHTML = name;
         this._makeItem([], div);
       }
@@ -21674,7 +21693,7 @@ return /******/ (function(modules) { // webpackBootstrap
         var objectLabel = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
 
         var div = document.createElement('div');
-        div.className = 'vis-network-configuration label s' + path.length;
+        div.className = 'vis-configuration vis-config-label vis-config-s' + path.length;
         if (objectLabel === true) {
           div.innerHTML = '<i><b>' + name + ':</b></i>';
         } else {
@@ -21694,7 +21713,7 @@ return /******/ (function(modules) { // webpackBootstrap
       key: '_makeDropdown',
       value: function _makeDropdown(arr, value, path) {
         var select = document.createElement('select');
-        select.className = 'vis-network-configuration select';
+        select.className = 'vis-configuration vis-config-select';
         var selectedValue = 0;
         if (value !== undefined) {
           if (arr.indexOf(value) !== -1) {
@@ -21736,7 +21755,7 @@ return /******/ (function(modules) { // webpackBootstrap
         var max = arr[2];
         var step = arr[3];
         var range = document.createElement('input');
-        range.className = 'vis-network-configuration range';
+        range.className = 'vis-configuration vis-config-range';
         try {
           range.type = 'range'; // not supported on IE9
           range.min = min;
@@ -21744,14 +21763,25 @@ return /******/ (function(modules) { // webpackBootstrap
         } catch (err) {}
         range.step = step;
 
+        // set up the popup settings in case they are needed.
+        var popupString = '';
+        var popupValue = 0;
+
         if (value !== undefined) {
-          if (value < 0 && value * 2 < min) {
-            range.min = value * 2;
-          } else if (value * 0.1 < min) {
-            range.min = value / 10;
-          }
-          if (value * 2 > max && max !== 1) {
-            range.max = value * 2;
+          var factor = 1.20;
+          if (value < 0 && value * factor < min) {
+            range.min = Math.ceil(value * factor);
+            popupValue = range.min;
+            popupString = 'range increased';
+          } else if (value / factor < min) {
+            range.min = Math.ceil(value / factor);
+            popupValue = range.min;
+            popupString = 'range increased';
+          }
+          if (value * factor > max && max !== 1) {
+            range.max = Math.ceil(value * factor);
+            popupValue = range.max;
+            popupString = 'range increased';
           }
           range.value = value;
         } else {
@@ -21759,7 +21789,7 @@ return /******/ (function(modules) { // webpackBootstrap
         }
 
         var input = document.createElement('input');
-        input.className = 'vis-network-configuration rangeinput';
+        input.className = 'vis-configuration vis-config-rangeinput';
         input.value = range.value;
 
         var me = this;
@@ -21771,7 +21801,76 @@ return /******/ (function(modules) { // webpackBootstrap
         };
 
         var label = this._makeLabel(path[path.length - 1], path);
-        this._makeItem(path, label, range, input);
+        var itemIndex = this._makeItem(path, label, range, input);
+
+        // if a popup is needed AND it has not been shown for this value, show it.
+        if (popupString !== '' && this.popupHistory[itemIndex] !== popupValue) {
+          this.popupHistory[itemIndex] = popupValue;
+          this._setupPopup(popupString, itemIndex);
+        }
+      }
+
+      /**
+       * prepare the popup
+       * @param string
+       * @param index
+       * @private
+       */
+    }, {
+      key: '_setupPopup',
+      value: function _setupPopup(string, index) {
+        var _this3 = this;
+
+        if (this.initialized === true && this.allowCreation === true && this.popupCounter < 4000) {
+          var div = document.createElement("div");
+          div.id = "vis-configuration-popup";
+          div.className = "vis-configuration-popup";
+          div.innerHTML = string;
+          div.onclick = function () {
+            _this3._removePopup();
+          };
+          this.popupCounter += 1;
+          this.popupDiv = { html: div, index: index };
+        }
+      }
+
+      /**
+       * remove the popup from the dom
+       * @private
+       */
+    }, {
+      key: '_removePopup',
+      value: function _removePopup() {
+        if (this.popupDiv.html !== undefined) {
+          this.popupDiv.html.parentNode.removeChild(this.popupDiv.html);
+          clearTimeout(this.popupDiv.hideTimeout);
+          clearTimeout(this.popupDiv.deleteTimeout);
+          this.popupDiv = {};
+        }
+      }
+
+      /**
+       * Show the popup if it is needed.
+       * @private
+       */
+    }, {
+      key: '_showPopupIfNeeded',
+      value: function _showPopupIfNeeded() {
+        var _this4 = this;
+
+        if (this.popupDiv.html !== undefined) {
+          var correspondingElement = this.domElements[this.popupDiv.index];
+          var rect = correspondingElement.getBoundingClientRect();
+          this.popupDiv.html.style.left = rect.left + "px";
+          this.popupDiv.html.style.top = rect.top - 30 + "px"; // 30 is the height;
+          document.body.appendChild(this.popupDiv.html);
+          this.popupDiv.hideTimeout = setTimeout(function () {
+            _this4.popupDiv.html.style.opacity = 0;
+          }, 1500);
+          this.popupDiv.deleteTimeout = setTimeout(function () {
+            _this4._removePopup();
+          }, 1800);
+        }
       }
 
       /**
@@ -21786,7 +21885,7 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function _makeCheckbox(defaultValue, value, path) {
         var checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
-        checkbox.className = 'vis-network-configuration checkbox';
+        checkbox.className = 'vis-configuration vis-config-checkbox';
         checkbox.checked = defaultValue;
         if (value !== undefined) {
           checkbox.checked = value;
@@ -21822,7 +21921,7 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function _makeTextInput(defaultValue, value, path) {
         var checkbox = document.createElement('input');
         checkbox.type = 'text';
-        checkbox.className = 'vis-network-configuration text';
+        checkbox.className = 'vis-configuration vis-config-text';
         checkbox.value = value;
         if (value !== defaultValue) {
           this.changedOptions.push({ path: path, value: value });
@@ -21847,22 +21946,22 @@ return /******/ (function(modules) { // webpackBootstrap
     }, {
       key: '_makeColorField',
       value: function _makeColorField(arr, value, path) {
-        var _this3 = this;
+        var _this5 = this;
 
         var defaultColor = arr[1];
         var div = document.createElement('div');
         value = value === undefined ? defaultColor : value;
 
         if (value !== 'none') {
-          div.className = 'vis-network-configuration colorBlock';
+          div.className = 'vis-configuration vis-config-colorBlock';
           div.style.backgroundColor = value;
         } else {
-          div.className = 'vis-network-configuration colorBlock none';
+          div.className = 'vis-configuration vis-config-colorBlock none';
         }
 
         value = value === undefined ? defaultColor : value;
         div.onclick = function () {
-          _this3._showColorPicker(value, div, path);
+          _this5._showColorPicker(value, div, path);
         };
 
         var label = this._makeLabel(path[path.length - 1], path);
@@ -21880,7 +21979,7 @@ return /******/ (function(modules) { // webpackBootstrap
     }, {
       key: '_showColorPicker',
       value: function _showColorPicker(value, div, path) {
-        var _this4 = this;
+        var _this6 = this;
 
         var rect = div.getBoundingClientRect();
         var bodyRect = document.body.getBoundingClientRect();
@@ -21891,7 +21990,7 @@ return /******/ (function(modules) { // webpackBootstrap
         this.colorPicker.setCallback(function (color) {
           var colorString = 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
           div.style.backgroundColor = colorString;
-          _this4._update(colorString, path);
+          _this6._update(colorString, path);
         });
       }
 
@@ -22017,7 +22116,7 @@ return /******/ (function(modules) { // webpackBootstrap
         if (this.parent.body && this.parent.body.emitter && this.parent.body.emitter.emit) {
           this.parent.body.emitter.emit("configChange", options);
         }
-
+        this.initialized = true;
         this.parent.setOptions(options);
       }
     }, {

gulpfile.js

@@ -100,6 +100,7 @@ gulp.task('bundle-css', ['clean'], function () {
   var files = [
     './lib/shared/activator.css',
     './lib/shared/bootstrap.css',
+    './lib/shared/configuration.css',
 
     './lib/timeline/component/css/timeline.css',
     './lib/timeline/component/css/panel.css',
@@ -115,9 +116,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-tooltip.css',
-    './lib/network/css/network-configuration.css',
+    './lib/network/css/network-navigation.css',
     './lib/network/css/network-colorpicker.css'
   ];
 

lib/shared/Configurator.js

@@ -24,6 +24,8 @@ class Configurator {
     this.allowCreation = false;
 
     this.options = {};
+    this.initialized = false;
+    this.popupCounter = 0;
     this.defaultOptions = {
       enabled: false,
       filter: true,
@@ -35,6 +37,9 @@ class Configurator {
     this.configureOptions = configureOptions;
     this.moduleOptions = {};
     this.domElements = [];
+    this.popupDiv = {};
+    this.popupLimit = 5;
+    this.popupHistory = {};
     this.colorPicker = new ColorPicker(pixelRatio);
     this.wrapper = undefined;
   }
@@ -48,6 +53,10 @@ class Configurator {
    */
   setOptions(options) {
     if (options !== undefined) {
+      // reset the popup history because the indices may have been changed.
+      this.popupHistory = {};
+      this._removePopup();
+
       let enabled = true;
       if (typeof options === 'string') {
         this.options.filter = options;
@@ -140,14 +149,14 @@ class Configurator {
 
     if (this.options.showButton === true) {
       let generateButton = document.createElement('div');
-      generateButton.className = 'vis-network-configuration button';
+      generateButton.className = 'vis-configuration vis-config-button';
       generateButton.innerHTML = 'generate options';
       generateButton.onclick =     () => {this._printOptions();};
-      generateButton.onmouseover = () => {generateButton.className = 'vis-network-configuration button hover';};
-      generateButton.onmouseout =  () => {generateButton.className = 'vis-network-configuration button';};
+      generateButton.onmouseover = () => {generateButton.className = 'vis-configuration vis-config-button hover';};
+      generateButton.onmouseout =  () => {generateButton.className = 'vis-configuration vis-config-button';};
 
       this.optionsContainer = document.createElement('div');
-      this.optionsContainer.className = 'vis-network-configuration vis-option-container';
+      this.optionsContainer.className = 'vis-configuration vis-config-option-container';
 
       this.domElements.push(this.optionsContainer);
       this.domElements.push(generateButton);
@@ -164,11 +173,13 @@ class Configurator {
    */
   _push() {
     this.wrapper = document.createElement('div');
-    this.wrapper.className = 'vis-network-configuration-wrapper';
+    this.wrapper.className = 'vis-configuration-wrapper';
     this.container.appendChild(this.wrapper);
     for (var i = 0; i < this.domElements.length; i++) {
       this.wrapper.appendChild(this.domElements[i]);
     }
+
+    this._showPopupIfNeeded()
   }
 
 
@@ -186,6 +197,8 @@ class Configurator {
       this.wrapper = undefined;
     }
     this.domElements = [];
+
+    this._removePopup();
   }
 
 
@@ -219,12 +232,14 @@ class Configurator {
   _makeItem(path, ...domElements) {
     if (this.allowCreation === true) {
       let item = document.createElement('div');
-      item.className = 'vis-network-configuration item s' + path.length;
+      item.className = 'vis-configuration vis-config-item vis-config-s' + path.length;
       domElements.forEach((element) => {
         item.appendChild(element);
       });
       this.domElements.push(item);
+      return this.domElements.length;
     }
+    return 0;
   }
 
 
@@ -235,7 +250,7 @@ class Configurator {
    */
   _makeHeader(name) {
     let div = document.createElement('div');
-    div.className = 'vis-network-configuration header';
+    div.className = 'vis-configuration vis-config-header';
     div.innerHTML = name;
     this._makeItem([],div);
   }
@@ -251,7 +266,7 @@ class Configurator {
    */
   _makeLabel(name, path, objectLabel = false) {
     let div = document.createElement('div');
-    div.className = 'vis-network-configuration label s' + path.length;
+    div.className = 'vis-configuration vis-config-label vis-config-s' + path.length;
     if (objectLabel === true) {
       div.innerHTML = '<i><b>' + name + ':</b></i>';
     }
@@ -271,7 +286,7 @@ class Configurator {
    */
   _makeDropdown(arr, value, path) {
     let select = document.createElement('select');
-    select.className = 'vis-network-configuration select';
+    select.className = 'vis-configuration vis-config-select';
     let selectedValue = 0;
     if (value !== undefined) {
       if (arr.indexOf(value) !== -1) {
@@ -310,7 +325,7 @@ class Configurator {
     let max = arr[2];
     let step = arr[3];
     let range = document.createElement('input');
-    range.className = 'vis-network-configuration range';
+    range.className = 'vis-configuration vis-config-range';
     try {
       range.type = 'range'; // not supported on IE9
       range.min = min;
@@ -319,15 +334,26 @@ class Configurator {
     catch (err) {}
     range.step = step;
 
+    // set up the popup settings in case they are needed.
+    let popupString = '';
+    let popupValue = 0;
+
     if (value !== undefined) {
-      if (value < 0 && value * 2 < min) {
-        range.min = value*2;
+      let factor = 1.20;
+      if (value < 0 && value * factor < min) {
+        range.min = Math.ceil(value * factor);
+        popupValue = range.min;
+        popupString = 'range increased';
       }
-      else if (value * 0.1 < min) {
-        range.min = value / 10;
+      else if (value / factor < min) {
+        range.min = Math.ceil(value / factor);
+        popupValue = range.min;
+        popupString = 'range increased';
       }
-      if (value * 2 > max && max !== 1) {
-        range.max = value * 2;
+      if (value * factor > max && max !== 1) {
+        range.max = Math.ceil(value * factor);
+        popupValue = range.max;
+        popupString = 'range increased';
       }
       range.value = value;
     }
@@ -336,7 +362,7 @@ class Configurator {
     }
 
     let input = document.createElement('input');
-    input.className = 'vis-network-configuration rangeinput';
+    input.className = 'vis-configuration vis-config-rangeinput';
     input.value = range.value;
 
     var me = this;
@@ -344,10 +370,70 @@ class Configurator {
     range.oninput  = function () {input.value = this.value; };
 
     let label = this._makeLabel(path[path.length-1], path);
-    this._makeItem(path, label, range, input);
+    let itemIndex = this._makeItem(path, label, range, input);
+
+    // if a popup is needed AND it has not been shown for this value, show it.
+    if (popupString !== '' && this.popupHistory[itemIndex] !== popupValue) {
+      this.popupHistory[itemIndex] = popupValue;
+      this._setupPopup(popupString, itemIndex);
+    }
+
   }
 
 
+  /**
+   * prepare the popup
+   * @param string
+   * @param index
+   * @private
+   */
+  _setupPopup(string, index) {
+    if (this.initialized === true && this.allowCreation === true && this.popupCounter < 4000) {
+      let div = document.createElement("div");
+      div.id = "vis-configuration-popup";
+      div.className = "vis-configuration-popup";
+      div.innerHTML = string;
+      div.onclick = () => {this._removePopup()};
+      this.popupCounter += 1;
+      this.popupDiv = {html:div, index:index};
+    }
+  }
+
+
+  /**
+   * remove the popup from the dom
+   * @private
+   */
+  _removePopup() {
+    if (this.popupDiv.html !== undefined) {
+      this.popupDiv.html.parentNode.removeChild(this.popupDiv.html);
+      clearTimeout(this.popupDiv.hideTimeout);
+      clearTimeout(this.popupDiv.deleteTimeout);
+      this.popupDiv = {};
+    }
+  }
+
+
+  /**
+   * Show the popup if it is needed.
+   * @private
+   */
+  _showPopupIfNeeded() {
+    if (this.popupDiv.html !== undefined) {
+      let correspondingElement = this.domElements[this.popupDiv.index];
+      let rect = correspondingElement.getBoundingClientRect();
+      this.popupDiv.html.style.left = rect.left + "px";
+      this.popupDiv.html.style.top = rect.top - 30 + "px"; // 30 is the height;
+      document.body.appendChild(this.popupDiv.html)
+      this.popupDiv.hideTimeout = setTimeout(() => {
+        this.popupDiv.html.style.opacity = 0;
+      },1500);
+      this.popupDiv.deleteTimeout = setTimeout(() => {
+        this._removePopup();
+      },1800)
+    }
+  }
+
   /**
    * make a checkbox for boolean options.
    * @param defaultValue
@@ -358,7 +444,7 @@ class Configurator {
   _makeCheckbox(defaultValue, value, path) {
     var checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
-    checkbox.className = 'vis-network-configuration checkbox';
+    checkbox.className = 'vis-configuration vis-config-checkbox';
     checkbox.checked = defaultValue;
     if (value !== undefined) {
       checkbox.checked = value;
@@ -391,7 +477,7 @@ class Configurator {
   _makeTextInput(defaultValue, value, path) {
     var checkbox = document.createElement('input');
     checkbox.type = 'text';
-    checkbox.className = 'vis-network-configuration text';
+    checkbox.className = 'vis-configuration vis-config-text';
     checkbox.value = value;
     if (value !== defaultValue) {
       this.changedOptions.push({path:path, value:value});
@@ -418,11 +504,11 @@ class Configurator {
     value = value === undefined ? defaultColor : value;
 
     if (value !== 'none') {
-      div.className = 'vis-network-configuration colorBlock';
+      div.className = 'vis-configuration vis-config-colorBlock';
       div.style.backgroundColor = value;
     }
     else {
-      div.className = 'vis-network-configuration colorBlock none';
+      div.className = 'vis-configuration vis-config-colorBlock none';
     }
 
     value = value === undefined ? defaultColor : value;
@@ -576,7 +662,7 @@ class Configurator {
     if (this.parent.body && this.parent.body.emitter && this.parent.body.emitter.emit) {
       this.parent.body.emitter.emit("configChange", options);
     }
-
+    this.initialized = true;
     this.parent.setOptions(options);
   }
 
@@ -601,6 +687,7 @@ class Configurator {
       }
     }
     return optionsObj;
+
   }
 
   _printOptions() {

lib/network/css/network-configuration.css → lib/shared/configuration.css

@@ -1,17 +1,17 @@
-div.vis-network-configuration {
+div.vis-configuration {
     position:relative;
     display:block;
     float:left;
     font-size:12px;
 }
 
-div.vis-network-configuration-wrapper {
+div.vis-configuration-wrapper {
     display:block;
     width:700px;
 }
 
 
-div.vis-network-configuration.vis-option-container{
+div.vis-configuration.vis-config-option-container{
     display:block;
     width:495px;
     background-color: #ffffff;
@@ -22,7 +22,7 @@ div.vis-network-configuration.vis-option-container{
     padding-left:5px;
 }
 
-div.vis-network-configuration.button{
+div.vis-configuration.vis-config-button{
     display:block;
     width:495px;
     height:25px;
@@ -38,13 +38,13 @@ div.vis-network-configuration.button{
     margin-bottom:30px;
 }
 
-div.vis-network-configuration.button.hover{
+div.vis-configuration.vis-config-button.hover{
     background-color: #4588e6;
     border:2px solid #214373;
     color:#ffffff;
 }
 
-div.vis-network-configuration.item{
+div.vis-configuration.vis-config-item{
     display:block;
     float:left;
     width:495px;
@@ -54,44 +54,44 @@ div.vis-network-configuration.item{
 }
 
 
-div.vis-network-configuration.item.s2{
+div.vis-configuration.vis-config-item.vis-config-s2{
     left:10px;
     background-color: #f7f8fa;
     padding-left:5px;
     border-radius:3px;
 }
-div.vis-network-configuration.item.s3{
+div.vis-configuration.vis-config-item.vis-config-s3{
     left:20px;
     background-color: #e4e9f0;
     padding-left:5px;
     border-radius:3px;
 }
-div.vis-network-configuration.item.s4{
+div.vis-configuration.vis-config-item.vis-config-s4{
     left:30px;
     background-color: #cfd8e6;
     padding-left:5px;
     border-radius:3px;
 }
 
-div.vis-network-configuration.header{
+div.vis-configuration.vis-config-header{
     font-size:18px;
     font-weight: bold;
 }
 
-div.vis-network-configuration.label{
+div.vis-configuration.vis-config-label{
     width:120px;
     height:25px;
     line-height: 25px;
 }
 
-div.vis-network-configuration.label.s3{
+div.vis-configuration.vis-config-label.vis-config-s3{
     width:110px;
 }
-div.vis-network-configuration.label.s4{
+div.vis-configuration.vis-config-label.vis-config-s4{
     width:100px;
 }
 
-div.vis-network-configuration.colorBlock{
+div.vis-configuration.vis-config-colorBlock{
     top:1px;
     width:30px;
     height:19px;
@@ -102,12 +102,12 @@ div.vis-network-configuration.colorBlock{
     cursor:pointer;
 }
 
-input.vis-network-configuration.checkbox {
+input.vis-configuration.vis-config-checkbox {
     left:-5px;
 }
 
 
-input.vis-network-configuration.rangeinput{
+input.vis-configuration.vis-config-rangeinput{
     position:relative;
     top:-5px;
     width:60px;
@@ -117,7 +117,7 @@ input.vis-network-configuration.rangeinput{
     pointer-events:none;
 }
 
-input.vis-network-configuration.range{
+input.vis-configuration.vis-config-range{
     /*removes default webkit styles*/
     -webkit-appearance: none;
 
@@ -129,7 +129,7 @@ input.vis-network-configuration.range{
     width: 300px;
     height:20px;
 }
-input.vis-network-configuration.range::-webkit-slider-runnable-track {
+input.vis-configuration.vis-config-range::-webkit-slider-runnable-track {
     width: 300px;
     height: 5px;
     background: #dedede; /* Old browsers */
@@ -145,7 +145,7 @@ input.vis-network-configuration.range::-webkit-slider-runnable-track {
     box-shadow: #aaaaaa 0px 0px 3px 0px;
     border-radius: 3px;
 }
-input.vis-network-configuration.range::-webkit-slider-thumb {
+input.vis-configuration.vis-config-range::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: 1px solid #14334b;
     height: 17px;
@@ -162,10 +162,10 @@ input.vis-network-configuration.range::-webkit-slider-thumb {
     box-shadow: #111927 0px 0px 1px 0px;
     margin-top: -7px;
 }
-input.vis-network-configuration.range:focus {
+input.vis-configuration.vis-config-range:focus {
     outline: none;
 }
-input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
+input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track {
     background: #9d9d9d; /* Old browsers */
     background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
@@ -176,7 +176,7 @@ input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
 }
 
-input.vis-network-configuration.range::-moz-range-track {
+input.vis-configuration.vis-config-range::-moz-range-track {
     width: 300px;
     height: 10px;
     background: #dedede; /* Old browsers */
@@ -192,7 +192,7 @@ input.vis-network-configuration.range::-moz-range-track {
     box-shadow: #aaaaaa 0px 0px 3px 0px;
     border-radius: 3px;
 }
-input.vis-network-configuration.range::-moz-range-thumb {
+input.vis-configuration.vis-config-range::-moz-range-thumb {
     border: none;
     height: 16px;
     width: 16px;
@@ -202,12 +202,12 @@ input.vis-network-configuration.range::-moz-range-thumb {
 }
 
 /*hide the outline behind the border*/
-input.vis-network-configuration.range:-moz-focusring{
+input.vis-configuration.vis-config-range:-moz-focusring{
     outline: 1px solid white;
     outline-offset: -1px;
 }
 
-input.vis-network-configuration.range::-ms-track {
+input.vis-configuration.vis-config-range::-ms-track {
     width: 300px;
     height: 5px;
 
@@ -221,24 +221,63 @@ input.vis-network-configuration.range::-ms-track {
     /*remove default tick marks*/
     color: transparent;
 }
-input.vis-network-configuration.range::-ms-fill-lower {
+input.vis-configuration.vis-config-range::-ms-fill-lower {
     background: #777;
     border-radius: 10px;
 }
-input.vis-network-configuration.range::-ms-fill-upper {
+input.vis-configuration.vis-config-range::-ms-fill-upper {
     background: #ddd;
     border-radius: 10px;
 }
-input.vis-network-configuration.range::-ms-thumb {
+input.vis-configuration.vis-config-range::-ms-thumb {
     border: none;
     height: 16px;
     width: 16px;
     border-radius: 50%;
     background:  #385380;
 }
-input.vis-network-configuration.range:focus::-ms-fill-lower {
+input.vis-configuration.vis-config-range:focus::-ms-fill-lower {
     background: #888;
 }
-input.vis-network-configuration.range:focus::-ms-fill-upper {
+input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
     background: #ccc;
+}
+
+.vis-configuration-popup {
+    position: absolute;
+    background: rgba(57, 76, 89, 0.85);
+    border: 2px solid #f2faff;
+    line-height:30px;
+    height:30px;
+    width:150px;
+    text-align:center;
+    color: #ffffff;
+    font-size:14px;
+    border-radius:4px;
+    -webkit-transition: opacity 0.3s ease-in-out;
+    -moz-transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.3s ease-in-out;
+}
+.vis-configuration-popup:after, .vis-configuration-popup:before {
+    left: 100%;
+    top: 50%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+}
+
+.vis-configuration-popup:after {
+    border-color: rgba(136, 183, 213, 0);
+    border-left-color: rgba(57, 76, 89, 0.85);
+    border-width: 8px;
+    margin-top: -8px;
+}
+.vis-configuration-popup:before {
+    border-color: rgba(194, 225, 245, 0);
+    border-left-color: #f2faff;
+    border-width: 12px;
+    margin-top: -12px;
 }