Specific position for tooltip

I have a layer which opens up as a tooltip everytime I hover a button. I simply did that by creating a JS function which displays or hides the layer.

Now, I am not a pro in JavaScript. My problem is the following: when the button is scrolled towards the top oft开发者_如何学运维 he screen I want the tooltip opening below – and if the button is near the bottom of the screen I want the tooltip opening above. Right now I just did it with absolute positioning. But obviously that doesnt do the trick.

Who can help? Thanks!

Absolute position for the tip I think it's the right choice!

When you open it (i.e. when you go over the button), check if its Y offsetTop is <= of the Y median (imaginary) line of the page (window.innerHeight or (IE case) document.body.clientHeight divided by 2).

For example a solution could be (more or less):

Edited: check this fiddle example (set "expand" height to see how it works ;))

Edited(2): Now works on IE too

when the page is scrolled (and you want to maintain the tooltip opened -> you don't use mouseout), you can recheck opened tips and arrange them again