Is there anyway to reliably tween a div to the location of another element on the page?
I have a div off screen with an Arrow image and some text that is going to server as a 'tutorial/help item' for the user of the website. When they click the help button, I want the div to come in from offscreen and point at the particular element that it has help information for.
I can tween from offscreen that is not the issue, the issue is reliably tweening to the location of the other element. I have tried using jQuery's .position() and .offset() methods to locate the element, which works somewhat but when I tween to it, it lines up the top left of the offscreen div with the top left of the element and they overlap. Is there something I can do with the origin to correct this?
Here is a pen of the current behavior i am achieving. http://codepen.io/anon/pen/AhnlL (click anywhere to activate the tween) One note, for demo sake, I used absolute positioning on the input element I am trying to tween to. On my site that wont be the case.
Any help would be greatly appreciated.