New styling for tooltip box, taking into account client widht and height

Author: santilland

app/scripts/scatter.js

@@ -1744,12 +1744,23 @@ scatterPlot.prototype.renderdots = function renderdots(parameter){
 			}
 			values = '<br>'+values;
 
+            var topPos = d3.event.pageY + 3;
+            var clientHeight = d3.select('body').node().getBoundingClientRect().height;
+            if (topPos+300 > clientHeight){
+                topPos = topPos - 300;
+            }
+            var leftPos = (d3.event.pageX + 10);
+            var clientWidth = d3.select('body').node().getBoundingClientRect().width;
+            if(leftPos+240 > clientWidth ){
+                leftPos = leftPos - 265;
+            }
+
             self.tooltip.transition()
                 .duration(100)
                 .style("display", "block");
             self.tooltip.html(values)
-                .style("left", (d3.event.pageX + 10) + "px")
-                .style("top", (d3.event.pageY + 3) + "px");
+                .style("left", leftPos + "px")
+                .style("top", topPos + "px");
 
             // Add close button
             var closeArea = self.tooltip.append('text')

app/styles/analytics.scss

@@ -33,8 +33,33 @@ svg {
   border-radius: 6px;
   display: none;
   padding: 5px;
+  max-height: 300px;
+  width: 240px;
+  overflow-y: scroll;
+  z-index: 1015;
 }
 
+// Scrollbar style for tooltib
+
+.AV-point-tooltip::-webkit-scrollbar-track
+{
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: #F5F5F5;
+}
+
+.AV-point-tooltip::-webkit-scrollbar
+{
+  width: 10px;
+  background-color: #F5F5F5;
+}
+
+.AV-point-tooltip::-webkit-scrollbar-thumb
+{
+  background-color: #000000;
+  border: 2px solid #555555;
+}
+
+
 
 .legend {
   font-size: 18px;