This is a tipsy bug (two tipsy bugs, actually). Would be nice to fix upstream, but the lazy way is to just switch to ne/nw tip placement so the tip is positioned in the corner of the bubble.

Tracked in mingle as https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/485

We can't easily fix the fact that when pushed against the arrow of the screen, the arrow doesn't point to exactly what we want. The arrow position in this case is "south" which means exactly 50% of the width for the arrow position. Since the bubble is "blocked" by the edge of the screen and its width is maintained, the arrow can't point to the element we wanted, because of the tipsy-s CSS (as defined in jquery.tipsy.css). I don't think this issue can be fixed without writing a significant amount of code upstream to handle a special arrow positioning in those situations. At the moment only the bubble has conditional position logic, the arrow just follows the bubble based on its gravity. Tipsy just has no logic whatsoever to guarantee that the arrow always points to the right element.

As for the second part (going outside of the screen), I couldn't actually figure out what code in tipsy makes the magic happen in the LTR case. I'm guessing it has to do with the actual width measuring, but I can't be sure.

Given that switching the arrow placement fixed both issues effortlessly and that the alternative is adding a significant amount of code to the upstream, I'll got for that.

Change 130604 had a related patch set uploaded by Gilles:
Change the tipsy gravity for the strip buttons

https://gerrit.wikimedia.org/r/130604

Change 130604 merged by jenkins-bot:
Change the tipsy gravity for the stripe buttons

https://gerrit.wikimedia.org/r/130604