Merge pull request #33 from EOX-A/tooltip_fix

Tooltip fix

Author: lubojr

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "D3.TimeSlider",
-  "version": "1.6.4",
+  "version": "1.6.5-rc.0",
   "description": "A D3.js based time slider",
   "homepage": "https://github.com/EOX-A/d3.TimeSlider",
   "author": {

package.json

@@ -262,21 +262,21 @@ class TimeSlider extends EventEmitter
         if @brushTooltip
             # setup hover events on brush
             @gBrush.selectAll('.resize.w')
-                .on('mouseover', => 
+                .on('mouseover', =>
                     @tooltipBrushMin.transition()
                         .duration(100)
                         .style('opacity', 0.9))
-                .on('mouseout', => 
+                .on('mouseout', =>
                     if !@brushing
                         @tooltipBrushMin.transition()
                             .duration(100)
                             .style('opacity', 0))
             @gBrush.selectAll('.resize.e')
-                .on('mouseover', => 
+                .on('mouseover', =>
                     @tooltipBrushMax.transition()
                         .duration(100)
                         .style('opacity', 0.9))
-                .on('mouseout', => 
+                .on('mouseout', =>
                     if !@brushing
                         @tooltipBrushMax.transition()
                             .duration(100)
@@ -418,7 +418,7 @@ class TimeSlider extends EventEmitter
                     e = new Date(e.getTime()+(d/2))
                     [low, high] = @scales.x.domain()
                     if @options.displayLimit != null and
-                       (e - s) > @options.displayLimit * 1000
+                      (e - s) > @options.displayLimit * 1000
                         [s, e] = @scales.x.domain()
                     @center(s,e)
                 )

src/d3.timeslider.coffee

@@ -18,7 +18,7 @@ bisect = (array, x, lo = 0, hi = array.length) ->
     return lo
 
 insort = (array, x) ->
-    array.splice(bisect(array, x), 0, x);
+    array.splice(bisect(array, x), 0, x)
 
 intersects = (a, b) ->
     return a[0] <= b[1] and b[0] <= a[1]
@@ -110,19 +110,43 @@ parseDuration = (duration) ->
 offsetDate = (date, seconds) ->
     return new Date(date.getTime() + seconds * 1000)
 
-centerTooltipOn = (tooltip, target, dir = 'center', offset = [0, 0]) ->
+
+findParentByClass = (element, className) ->
+    # traverse up the DOM tree until requested parent node is found
+    while element.classList
+        if element.classList.contains(className)
+            return element
+        element = element.parentNode
+
+
+centerTooltipOn = (tooltip, target, dir = 'center', offset = [0, 0], viewportClassName = 'timeslider') ->
     rect = target.getBoundingClientRect()
     tooltipRect = tooltip[0][0].getBoundingClientRect()
+
+    viewport = findParentByClass(target, viewportClassName)
+
+    if viewport
+        # clip the x-axis rectangle bounds to the viewport extent
+        # to make the tooltip always visible
+        viewportRect = viewport.getBoundingClientRect()
+        xLeft = Math.max(rect.left, viewportRect.left)
+        xRight = Math.min(rect.right, viewportRect.right)
+    else
+        # default to the rectangle bounds if the viewport cannot be found
+        xLeft = rect.left
+        xRight = rect.right
+
     if dir == 'left'
-        xOff = rect.left
+        xOff = xLeft
     else if dir == 'right'
-        xOff = rect.right
+        xOff = xRight
     else
-        xOff = rect.left + rect.width / 2
+        xOff = xLeft + (xRight - xLeft) / 2
     tooltip
         .style('left', xOff - tooltipRect.width / 2 + offset[0] + "px")
         .style('top', (rect.top - tooltipRect.height) + offset[1] + "px")
 
+
 module.exports =
     split: split
     bisect: bisect