Tween to the location of another element on the page

[code_wild]

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. 

See the Pen AhnlL by anon (@anon) on CodePen

 (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. 

[Rodrigo]

Hi,

 

Just some basic issues with the elements positioning.

 

You weren't considering both elements dimensions, therefore the tooltip landed in an odd position.

 

I forked your codepen and tweaked a little:

 

See the Pen AcImf by rhernando (@rhernando) on CodePen

 

Let us know if you need anything else.

 

Rodrigo.

[code_wild]

Thanks for your help yet again Rodrigo!

 

I ended up doing something very similar to solve the problem but you way seems more succinct.