From c62a09a5cfa572d2a24b5b2c542d24dc3a016cb6 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Thiemo=20M=C3=A4ttig?= <thiemo.maettig@wikimedia.de>
Date: Thu, 10 Dec 2015 10:15:32 +0100
Subject: [PATCH] Fix positioning of jQuery.tipsy tooltip arrows

We noticed this issue because we are using the north-west style in
Wikibase/wikidata.org. In this style the arrow is misplaced by 1px. It's
not misplaced in other styles.

To help you understand how this CSS works: There is a 11x11px tipsy.png
with a diamond shape. This single image is used to draw all arrows. For
an arrow pointing up, the upper 11x6px of the image are used. For an
arrow pointing right, the right 6x11px are used. And so on.

Therefore all widths and heights must be 6px and 11px.

The arrow is positioned on top, bottom, left or right of the "tipsy-inner"
box. The box does have a 1px border. The arrow image overlaps this border
by 1px. This makes it look like the border does have a gap and the arrow
sticks out.

Therefor the space reserved for the arrow *outside* of the box must be
5px.

So what exactly does this patch fix?
1. The unit in 0px is not needed.
2. The east arrow is to short, 5px instead of the full 6px.
3. The north-west and north-east arrows are misplaced. They overlap the
   box by 2px instead of 1px. This makes the diagonal lines of the arrow
   stick *into* the box.

Change-Id: I560d501690d0d28f1ae19595a88992fa36227e01
---
 resources/src/jquery.tipsy/jquery.tipsy.css | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/src/jquery.tipsy/jquery.tipsy.css b/resources/src/jquery.tipsy/jquery.tipsy.css
index 6471516ddc..33d9a003eb 100644
--- a/resources/src/jquery.tipsy/jquery.tipsy.css
+++ b/resources/src/jquery.tipsy/jquery.tipsy.css
@@ -28,46 +28,46 @@
 	height: 6px;
 }
 /* @noflip */ .tipsy-n .tipsy-arrow {
-	top: 0px;
+	top: 0;
 	left: 50%;
 	margin-left: -5px;
 }
 /* @noflip */ .tipsy-nw .tipsy-arrow {
-	top: 1px;
+	top: 0;
 	left: 10px;
 }
 /* @noflip */ .tipsy-ne .tipsy-arrow {
-	top: 1px;
+	top: 0;
 	right: 10px;
 }
 /* @noflip */ .tipsy-s .tipsy-arrow {
-	bottom: 0px;
+	bottom: 0;
 	left: 50%;
 	margin-left: -5px;
 	background-position: bottom left;
 }
 /* @noflip */ .tipsy-sw .tipsy-arrow {
-	bottom: 0px;
+	bottom: 0;
 	left: 10px;
 	background-position: bottom left;
 }
 /* @noflip */ .tipsy-se .tipsy-arrow {
-	bottom: 0px;
+	bottom: 0;
 	right: 10px;
 	background-position: bottom left;
 }
 /* @noflip */ .tipsy-e .tipsy-arrow {
 	top: 50%;
 	margin-top: -5px;
-	right: 1px;
-	width: 5px;
+	right: 0;
+	width: 6px;
 	height: 11px;
 	background-position: top right;
 }
 /* @noflip */ .tipsy-w .tipsy-arrow {
 	top: 50%;
 	margin-top: -5px;
-	left: 0px;
+	left: 0;
 	width: 6px;
 	height: 11px;
 }
-- 
2.20.1