search

calebjacob / tooltipster

A jQuery tooltip plugin
MIT License
2.76k stars 480 forks source link

Arrow alignment fails on scaled views and smaller viewports #305

Closed frederik-wolf closed 9 years ago

frederik-wolf commented 9 years ago

Hi there,

I've been running into this issue for the last couple of hours and I cannot seem to figure it out:

Tooltipster bug

Tooltipster works perfectly on desktop devices and even on the iPad (mostly). Arrows get aligned correctly and everything works as it is supposed to be.

But when I try the implementation with an iPhone it just doesn't work. The arrow centers on top of the tooltip. It seems like no additional alignment function is triggered in this view. On the iPad arrows are aligned perfectly with the viewport edges so that nothing get's cut off or looks like the screenshot from before. But when I zoom in on the iPad just the same thing as on the iPhone happens.

In the screenshot attached, the active tooltip is the "i" icon on the right side. So as you can see the arrow on top of the tooltip shifts quite a bit :)

The viewport tag is configured like this:

Hope you can help & cheers for this great plugin!

louisameline commented 9 years ago

Hi,

do you see a similar issue when you try on our demo page ? Are you referring to css scale transformations ? Also FYI, tooltips may seem misaligned when the target has an initial size/position at instantiation but has another one a few milliseconds later.

frederik-wolf commented 9 years ago

Your demo page hasn't the same starting point I guess but the 2nd tooltip get's cropped on my iPhone 5S (right side cropped off by viewport limit)

I am referring to the margin of the arrow which you can toggle :) The arrow should align centered to its origin element. Normally this happens unless you scale a webpage (iPad) or if you are on a very small screen with a page which is not reponsive by meta queries.

I will try delaying the tooltipster init function and see if I get any other results to exclude your last option from being the issue.

louisameline commented 9 years ago

And also please check that your HTML element does not have a real size bigger than the visual result. Maybe it's actually centered on that real size.

louisameline commented 9 years ago

Can this issue be closed ?