github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 10:23:14 -04:00
Code Issues Projects Releases Packages Wiki Activity

[vis/tooltip] improve placement to prevent issues in #401

Browse source
This commit is contained in:
Spencer Alger 2014-09-30 18:28:09 -07:00
parent 0054b82108
commit cdcacdbce7
1 changed files with 39 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/kibana/components/vislib/lib/tooltip.js
View file

@ -40,23 +40,17 @@ define(function (require) {
selection.each(function (data, i) { selection.each(function (data, i) {
var element = d3.select(this); var element = d3.select(this);
var offset;
element element
.on('mousemove.tip', function (d) { .on('mousemove.tip', function (d) {
var mouseMove = { var placement = self.getTooltipPlacement(d3.event);
left: d3.event.clientX,
top: d3.event.clientY
};
offset = self.getOffsets(mouseMove);
// return text and position for tooltip // return text and position for tooltip
return tooltipDiv.datum(self.events.eventResponse(d, i)) return tooltipDiv.datum(self.events.eventResponse(d, i))
.html(tooltipFormatter) .html(tooltipFormatter)
.style('visibility', 'visible') .style('visibility', 'visible')
.style('left', mouseMove.left + offset.left + 'px') .style('left', placement.left + 'px')
.style('top', mouseMove.top + offset.top + 'px'); .style('top', placement.top + 'px');
}) })
.on('mouseout.tip', function () { .on('mouseout.tip', function () {
return tooltipDiv.style('visibility', 'hidden') return tooltipDiv.style('visibility', 'hidden')
@ -67,35 +61,43 @@ define(function (require) {
}; };
}; };
Tooltip.prototype.getOffsets = function (mouseMove) { Tooltip.prototype.getTooltipPlacement = function (event) {
var self = this; var self = this;
var offset = {top: -10, left: 10}; var OFFSET = 15;
if ($(self.el).find('.' + self.containerClass)) { var chart = $(self.el).find('.' + self.containerClass);
var container = $(self.el).find('.' + self.containerClass); if (!chart.size()) return;
var chartXOffset = container.offset().left;
var chartYOffset = container.offset().top;
var chartWidth = container.width();
var chartHeight = container.height();
var tip = $('.' + self.tooltipClass)[0];
var tipWidth = tip.clientWidth;
var tipHeight = tip.clientHeight;
// change xOffset to keep tooltip within container var chartPos = chart.offset();
// if tip width + xOffset puts it over right edge of container, flip left chartPos.right = chartPos.left + chart.outerWidth();
// unless flip left puts it over left edge of container chartPos.bottom = chartPos.top + chart.outerHeight();
// change yOffset to keep tooltip within container
if (mouseMove.left + offset.left + tipWidth > chartXOffset + chartWidth &&
mouseMove.left - tipWidth - 10 > chartXOffset) {
offset.left = -10 - tipWidth;
}
if (mouseMove.top + tipHeight - 10 > chartYOffset + chartHeight) {
offset.top = chartYOffset + chartHeight;
}
}
return offset; var tip = $('.' + self.tooltipClass);
var tipWidth = tip.outerWidth();
var tipHeight = tip.outerHeight();
// the placements if we were to place the tip east or west
var left = {
east: event.clientX + OFFSET,
west: event.clientX - tipWidth - OFFSET
};
var eastOverEdge = left.east + tipWidth > chartPos.right;
var westOverEdge = left.west + tipWidth < chartPos.left;
// the placements if we were to place the tip north or south
var top = {
south: event.clientY + OFFSET,
north: event.clientY - tipHeight - OFFSET
};
var northOverEdge = top.north + tipHeight < chartPos.top;
var southOverEdge = top.south + tipHeight > chartPos.bottom;
return {
top: (southOverEdge && !northOverEdge) ? top.north : top.south,
left: (eastOverEdge && !westOverEdge) ? left.west : left.east
};
}; };
return Tooltip; return Tooltip;