How to create an html tooltip that never goes off screen?

Question

I'm creating a tooltips for educational purpose.

Assume the tooltip could be created at any position on the page dynamically.

I'd like to know the best way to make tooltips positioned in such a way that never go off the screen without changing their content or size.

edit: Or without using another tooltip library.

.has-tooltip:hover ~ div {
    display: block;
}

edit: example fiddle of a tooltip that could go off screen in some situations: http://jsfiddle.net/n94rv/13/embedded/result/

Answer 1

You could measure which quadrant the placement of the tooltip will occur in and then place the tooltip on a different side depending on which edge of the screen the tooltip is near.

For example, if it's in the bottom right corner of the screen the tooltip would be positioned such that it goes up and to the left of the placement area.

Whereas, if it were the top left corner of the screen the tooltip would be positioned such that it goes down and right from the placement area.