Fix positioning of jQuery.tipsy tooltip arrows
authorThiemo Mättig <thiemo.maettig@wikimedia.de>
Thu, 10 Dec 2015 09:15:32 +0000 (10:15 +0100)
committerThiemo Mättig (WMDE) <thiemo.maettig@wikimedia.de>
Fri, 11 Dec 2015 14:31:00 +0000 (14:31 +0000)
commitc62a09a5cfa572d2a24b5b2c542d24dc3a016cb6
tree4988a028d5739dd6a649ef49badf9205d741832c
parente05e4b111ce743727957ed7da162349864dd1cd3
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