CSS dynamic tooltip position when hanging with jQuery

Question

I am writing a simple hint that may contain HTML tags. Please check http://jsfiddle.net/Qkwm8/ for a demo.

I want the tooltip to display correctly regardless of the position of the element, in this case <a> , which shows tooltips on a mouseover event.

Tooltips are displayed perfectly only if <a> floats to the right (or is at the end of the line) or at the bottom of the screen, where it does not display properly, it is displayed from the screen

If <a> floats to the right or at the end of the line or is at the bottom of the screen, I want the tooltip to change its position so that it remains visible

Thanks.

Update demo link

here is the full result: http://jsfiddle.net/Qkwm8/3/

Answer 1

You can use the width of the document to check how wide the html document is and adjust the left position accordingly. Say:

  //set the left position var left = $(this).offset().left + 10; if(left + 200 > $(document).width()){ left = $(document).width() - 200; } 

I used 200 here because you set your tooltip to be 200 pixels wide. Something similar can be done with height.

There is also window width, but I always confuse the difference, so you should check which one gives the best results.

An example of the bottom of the page:

  //set the height, top position var height = $(this).height(); var top = $(this).offset().top; if(top + 200 > $(window).height()){ top = $(window).height() - 200 - height; } 

Again, using 200, as you set your tooltip to a height of 200 pixels.

Answer 2

$ ('a.show-tooltips'). mouseover (function () {

if (($ (this) .parent ()). css ('float')) == "right") add the correct class to the left

else → the right class on the right ....}