From d737153e29ec6058191d2ea1830a14f436d4ffab Mon Sep 17 00:00:00 2001
From: Leszek Manicki <leszek.manicki@wikimedia.de>
Date: Fri, 22 Jul 2016 15:00:56 +0200
Subject: [PATCH] Smarter setting of the "gravity" of tooltips

This adjusts the position of the tooltip depending on what is the
position of the related revision bar in the plot, and on the
size of the contents of the tooltip.

This change makes the tooltip be always displayed below
the revision plot, so it is visible to the user no matter if there is
enough (visible) space above the plot.
Also now it is checked if there is enough space on the left and right
side of the browser window to display the tooltip centered horizontally.
If not, this adjusts the horizontal position of the tooltip so that
it does not get shown outside of the window.
The latter in particular improves displaying of longer edit
summaries in RTL mode. Apparently LTR-centered browsers took care
of not showing the tooltip outside the right edge of the window
but in the case of left edge the tooltip could run outside of the window
leaving a part of summary not visible to the user without scrolling.

Bug: T141071
Bug: T141093
Change-Id: I8d519c5fd42d8403b527fa97d72a5c46991fc27b
---
 .../ext.RevisionSlider.RevisionListView.js    | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/modules/ext.RevisionSlider.RevisionListView.js b/modules/ext.RevisionSlider.RevisionListView.js
index fa2408d7..8f407fb2 100644
--- a/modules/ext.RevisionSlider.RevisionListView.js
+++ b/modules/ext.RevisionSlider.RevisionListView.js
@@ -39,6 +39,26 @@
 				},
 				hideTooltip = function () {
 					self.hideTooltip( $( this ) );
+				},
+				tooltipGravity = function () {
+					// Returns a function setting a gravity of the tooltip so that it will be entirely visible
+					// Based on tipsy's own $.fn.tipsy.autoBounds, with considering the width of the
+					// inner contents of the tooltip, and assuming the gravity always starts with 'n'
+					return function () {
+						var dir = 'n',
+							$this = $( this ),
+							$tip = $this.tipsy( true ).$tip,
+							boundLeft = $( document ).scrollLeft() + $tip.outerWidth();
+
+						if ( $this.offset().left < boundLeft ) {
+							dir += 'w';
+						}
+						if ( $( window ).width() + $( document ).scrollLeft() - $this.offset().left < 0 ) {
+							dir += 'e';
+						}
+
+						return dir;
+					};
 				};
 
 			for ( i = 0; i < revs.length; i++ ) {
@@ -52,7 +72,7 @@
 						.attr( 'title', tooltip )
 						.width( revisionTickWidth )
 						.tipsy( {
-							gravity: 's',
+							gravity: tooltipGravity(),
 							html: true,
 							trigger: 'manual',
 							className: 'mw-revslider-revision-tooltip mw-revslider-revision-tooltip-' + ( i + 1 )