title: How do I dynamically change the css of an element that runs offscreen to make it stay onscreen?
body: <p>I have what is for all intents a mouseover tooltip. It lives on multiple page elements (dynamically generated, so I never know how many there will be or what their positions are.)</p>
  
  <p>I've had complaints that on lower-resolution screens, the tooltips on items in the rightmost column of elements run offscreen. Since I don't know the position of the parent item when it's created, I need a way to detect (before the mouseover actually happens) that the tooltip div will partially be offscreen when displayed, and change the css accordingly.</p>
  
  <p>I know what the css needs to be; what I'm having trouble with is the detecting part. I've seen a <a href="https://stackoverflow.com/questions/6294284/how-to-know-when-an-element-will-be-off-screen">few</a> <a href="https://stackoverflow.com/questions/1230414/how-to-see-if-an-element-in-offscreen">questions</a> that are similar, but the solutions all involve using prototype or jquery plugins. I'm limited to core jquery (or just plain javascript) on this project.</p>
  
  <p>Any pointers out there?</p>