Динамическое положение подсказки CSS при наведении курсора с помощью jQuery

Я пишу простую всплывающую подсказку, которая может содержать HTML-теги. Пожалуйста, проверьте http://jsfiddle.net/Qkwm8/ для демонстрации.

Я хочу, чтобы всплывающая подсказка отображалась правильно независимо от положения элемента, в данном случае , который показывает всплывающие подсказки при наведении курсора мыши.

Всплывающие подсказки отображаются нормально, кроме случаев, когда перемещается вправо (или находится в конце строки ) или внизу экрана, где он не отображается должным образом, он появляется за пределами экрана

Если перемещается вправо, или в конце строки, или находится в в нижней части экрана, я хочу, чтобы всплывающая подсказка изменила положение, чтобы она оставалась видимой

Спасибо.

Обновите демонстрационную ссылку

вот полный результат: http://jsfiddle.net/Qkwm8/3 /