Graph3d tooltip styling (#2780)

* styling support for graph3d tooltips

* styling support for graph3d tooltips

* graph3d styling example, deleted new example and altered the original

* graph3d tooltip styling, documentation

* graph3d tooltip styling, use the util module's method for merging objects

docs/graph3d/index.html

@@ -498,6 +498,38 @@ var options = {
       </td>
     </tr>
 
+    <tr>
+      <td>tooltipStyle</td>
+      <td>Object</td>
+      <td>
+<pre class="prettyprint lang-js">
+{ 
+  content: {
+    padding: '10px',
+    border: '1px solid #4d4d4d',
+    color: '#1a1a1a',
+    background: 'rgba(255,255,255,0.7)',
+    borderRadius: '2px',
+    boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
+  },
+  line: {
+    height: '40px',
+    width: '0',
+    borderLeft: '1px solid #4d4d4d'
+  },
+  dot: {
+    height: '0',
+    width: '0',
+    border: '5px solid #4d4d4d',
+    borderRadius: '5px'
+  }
+}</pre>
+      </td>
+      <td>Tooltip style properties.
+        Provided properties will be merged with the default object.
+      </td>
+    </tr>
+
     <tr>
       <td>valueMax</td>
       <td>number</td>

examples/graph3d/11_tooltips.html

@@ -64,12 +64,26 @@
         showShadow: false,
 
         // Option tooltip can be true, false, or a function returning a string with HTML contents
-        //tooltip: true,
         tooltip: function (point) {
           // parameter point contains properties x, y, z, and data
           // data is the original object passed to the point constructor
           return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
         },
+  
+        // Tooltip default styling can be overridden
+        tooltipStyle: {
+          content: {
+            background    : 'rgba(255, 255, 255, 0.7)',
+            padding       : '10px',
+            borderRadius  : '10px'
+          },
+          line: {
+            borderLeft    : '1px dotted rgba(0, 0, 0, 0.5)'
+          },
+          dot: {
+            border        : '5px solid rgba(0, 0, 0, 0.5)'
+          }
+        },
 
         keepAspectRatio: true,
         verticalRatio: 0.5

lib/graph3d/Graph3d.js

@@ -67,6 +67,29 @@ var DEFAULTS = {
 
   style            : Graph3d.STYLE.DOT,
   tooltip          : false,
+
+  tooltipStyle     : {
+      content : {
+        padding       : '10px',
+        border        : '1px solid #4d4d4d',
+        color         : '#1a1a1a',
+        background    : 'rgba(255,255,255,0.7)',
+        borderRadius  : '2px',
+        boxShadow     : '5px 5px 10px rgba(128,128,128,0.5)'
+      },
+      line    : {
+        height        : '40px',
+        width         : '0',
+        borderLeft    : '1px solid #4d4d4d'
+      },
+      dot     : {
+        height        : '0',
+        width         : '0',
+        border        : '5px solid #4d4d4d',
+        borderRadius  : '5px'
+      }
+  },
+
   showLegend       : autoByDefault, // determined by graph style
   backgroundColor  : autoByDefault,
 
@@ -2314,26 +2337,16 @@ Graph3d.prototype._showTooltip = function (dataPoint) {
 
   if (!this.tooltip) {
     content = document.createElement('div');
+    Object.assign(content.style, {}, this.tooltipStyle.content);
     content.style.position = 'absolute';
-    content.style.padding = '10px';
-    content.style.border = '1px solid #4d4d4d';
-    content.style.color = '#1a1a1a';
-    content.style.background = 'rgba(255,255,255,0.7)';
-    content.style.borderRadius = '2px';
-    content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
-
+    
     line = document.createElement('div');
+    Object.assign(line.style, {}, this.tooltipStyle.line);
     line.style.position = 'absolute';
-    line.style.height = '40px';
-    line.style.width = '0';
-    line.style.borderLeft = '1px solid #4d4d4d';
 
     dot = document.createElement('div');
+    Object.assign(dot.style, {}, this.tooltipStyle.dot);
     dot.style.position = 'absolute';
-    dot.style.height = '0';
-    dot.style.width = '0';
-    dot.style.border = '5px solid #4d4d4d';
-    dot.style.borderRadius = '5px';
 
     this.tooltip = {
       dataPoint: null,

lib/graph3d/Settings.js

@@ -2,6 +2,7 @@
 // This modules handles the options for Graph3d.
 //
 ////////////////////////////////////////////////////////////////////////////////
+var util = require('../util');
 var Camera  = require('./Camera');
 var Point3d = require('./Point3d');
 
@@ -69,7 +70,7 @@ var OPTIONKEYS = [
   'axisColor',
   'gridColor',
   'xCenter',
-  'yCenter'
+  'yCenter',
 ];
 
 
@@ -115,7 +116,6 @@ function isEmpty(obj) {
 }
 
 
-
 /**
  * Make first letter of parameter upper case.
  *
@@ -241,7 +241,6 @@ function setOptions(options, dst) {
     throw new Error('DEFAULTS not set for module Settings');
   }
 
-
   // Handle the parameters which can be simply copied over
   safeCopy(options, dst, OPTIONKEYS);
   safeCopy(options, dst, PREFIXEDOPTIONKEYS, 'default');
@@ -250,7 +249,6 @@ function setOptions(options, dst) {
   setSpecialSettings(options, dst);
 }
 
-
 /**
  * Special handling for certain parameters
  *
@@ -274,6 +272,10 @@ function setSpecialSettings(src, dst) {
   if (src.onclick != undefined) {
     dst.onclick_callback = src.onclick;
   }
+
+  if (src.tooltipStyle !== undefined) {
+    util.selectiveDeepExtend(['tooltipStyle'], dst, src);
+  }
 }