From d1dee9039398cc1de9a67bb23e59d0d377eb74d9 Mon Sep 17 00:00:00 2001
From: mikhail samoilov <antiplaka@gmail.com>
Date: Sun, 26 Jan 2014 12:58:39 +0200
Subject: [PATCH 1/3] Update tooltip position on mouse move

---
 c3.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/c3.js b/c3.js
index 6a93d21..e459119 100644
--- a/c3.js
+++ b/c3.js
@@ -1120,12 +1120,6 @@
                         .data([selectedData[0]])
                         .attr(__axis_rotated ? 'y1' : 'x1', xx)
                         .attr(__axis_rotated ? 'y2' : 'x2', xx);
-
-                    // Set tooltip
-                    tooltip.style("top", (d3.mouse(this)[1] + 30) + "px")
-                           .style("left", ((__axis_rotated ? d3.mouse(this)[0] : x(selectedData[0].x)) + 60) + "px");
-                    tooltip.html(__tooltip_contents(selectedData));
-                    tooltip.style("visibility", "visible");
                 })
                 .on('mouseout', function (d, i) {
                     main.select('line.xgrid-focus').style("visibility", "hidden");
@@ -1140,6 +1134,16 @@
                         .classed(EXPANDED, false);
                 })
                 .on('mousemove', function (d, i) {
+                    var selectedData = c3.data.targets.map(function (d) {
+                        return addName(d.values[i]);
+                    });
+
+                    // Set tooltip
+                    tooltip.style("top", (d3.mouse(this)[1] + 15) + "px")
+                        .style("left", ((__axis_rotated ? d3.mouse(this)[0] : x(selectedData[0].x)) + 60) + "px");
+                    tooltip.html(__tooltip_contents(selectedData));
+                    tooltip.style("visibility", "visible");
+
                     if (! __data_selection_enabled || dragging) { return; }
                     if (__data_selection_grouped) { return; } // nothing to do when grouped
 

From ad36ed3dabf20439e2d3d9b35aa691ef8c435cbe Mon Sep 17 00:00:00 2001
From: mikhail samoilov <antiplaka@gmail.com>
Date: Sun, 26 Jan 2014 16:08:42 +0200
Subject: [PATCH 2/3] Use 'display' property to control tooltip visibility

---
 c3.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/c3.js b/c3.js
index e459119..e3d46f9 100644
--- a/c3.js
+++ b/c3.js
@@ -978,7 +978,7 @@
                 .style("position", "absolute")
                 .style("width", "30%") // TODO: cul actual width when show
                 .style("z-index", "10")
-                .style("visibility", "hidden");
+                .style("display", "none");
 
             /*-- Main Region --*/
 
@@ -1123,7 +1123,7 @@
                 })
                 .on('mouseout', function (d, i) {
                     main.select('line.xgrid-focus').style("visibility", "hidden");
-                    tooltip.style("visibility", "hidden");
+                    tooltip.style("display", "none");
                     // Undo expanded circles
                     main.selectAll('.-circle-' + i)
                         .filter(function () { return d3.select(this).classed(EXPANDED); })
@@ -1142,7 +1142,7 @@
                     tooltip.style("top", (d3.mouse(this)[1] + 15) + "px")
                         .style("left", ((__axis_rotated ? d3.mouse(this)[0] : x(selectedData[0].x)) + 60) + "px");
                     tooltip.html(__tooltip_contents(selectedData));
-                    tooltip.style("visibility", "visible");
+                    tooltip.style("display", "block");
 
                     if (! __data_selection_enabled || dragging) { return; }
                     if (__data_selection_grouped) { return; } // nothing to do when grouped
@@ -1347,7 +1347,7 @@
                 })));
                 tooltip.style("top", __tooltip_init_position.top)
                        .style("left", __tooltip_init_position.left)
-                       .style("visibility", "visible");
+                       .style("display", "block");
             }
         }
 
@@ -1388,7 +1388,7 @@
             subY2.domain(y2.domain());
 
             // tooltip
-            tooltip.style("visibility", "hidden");
+            tooltip.style("display", "none");
 
             // grid
             main.select('line.xgrid-focus')

From 135ee5aa27338ce6e9392d1d18fa765dd0e28c1c Mon Sep 17 00:00:00 2001
From: mikhail samoilov <antiplaka@gmail.com>
Date: Sun, 26 Jan 2014 16:56:15 +0200
Subject: [PATCH 3/3] Dynamic tooltip position based on chart boundaries

---
 c3.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/c3.js b/c3.js
index e3d46f9..10ea75f 100644
--- a/c3.js
+++ b/c3.js
@@ -976,7 +976,6 @@
                 .style("position", "relative")
               .append("div")
                 .style("position", "absolute")
-                .style("width", "30%") // TODO: cul actual width when show
                 .style("z-index", "10")
                 .style("display", "none");
 
@@ -1138,11 +1137,23 @@
                         return addName(d.values[i]);
                     });
 
+                    // Construct tooltip
+                    tooltip.html(__tooltip_contents(selectedData))
+                        .style("visibility", "hidden")
+                        .style("display", "block");
+                    // Get tooltip dimensions
+                    var tWidth = tooltip.property('offsetWidth'),
+                        tHeight = tooltip.property('offsetHeight');
                     // Set tooltip
-                    tooltip.style("top", (d3.mouse(this)[1] + 15) + "px")
-                        .style("left", ((__axis_rotated ? d3.mouse(this)[0] : x(selectedData[0].x)) + 60) + "px");
-                    tooltip.html(__tooltip_contents(selectedData));
-                    tooltip.style("display", "block");
+                    // todo get rid of magic numbers
+                    tooltip
+                        .style("top", (d3.mouse(this)[1] + 15 + tHeight < getCurrentHeight() ? d3.mouse(this)[1] + 15 : d3.mouse(this)[1] - tHeight ) + "px")
+                        .style("left", ((__axis_rotated ?
+                            d3.mouse(this)[0] :
+                            (x(selectedData[0].x) + 60 + tWidth < getCurrentWidth()) ?
+                                (x(selectedData[0].x) + 60) +"px" : (x(selectedData[0].x) - tWidth + 30)  + "px"
+                        )))
+                        .style("visibility", "visible");
 
                     if (! __data_selection_enabled || dragging) { return; }
                     if (__data_selection_grouped) { return; } // nothing to do when grouped