Browse Source

Dynamic tooltip position based on chart boundaries

pull/8/head
mikhail samoilov 11 years ago
parent
commit
135ee5aa27
  1. 21
      c3.js

21
c3.js

@ -976,7 +976,6 @@
.style("position", "relative") .style("position", "relative")
.append("div") .append("div")
.style("position", "absolute") .style("position", "absolute")
.style("width", "30%") // TODO: cul actual width when show
.style("z-index", "10") .style("z-index", "10")
.style("display", "none"); .style("display", "none");
@ -1138,11 +1137,23 @@
return addName(d.values[i]); 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 // Set tooltip
tooltip.style("top", (d3.mouse(this)[1] + 15) + "px") // todo get rid of magic numbers
.style("left", ((__axis_rotated ? d3.mouse(this)[0] : x(selectedData[0].x)) + 60) + "px"); tooltip
tooltip.html(__tooltip_contents(selectedData)); .style("top", (d3.mouse(this)[1] + 15 + tHeight < getCurrentHeight() ? d3.mouse(this)[1] + 15 : d3.mouse(this)[1] - tHeight ) + "px")
tooltip.style("display", "block"); .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_enabled || dragging) { return; }
if (__data_selection_grouped) { return; } // nothing to do when grouped if (__data_selection_grouped) { return; } // nothing to do when grouped

Loading…
Cancel
Save