CSS dynamic position of tooltip on hover with jQuery

Question

I'm writing a simple tooltip that can hold HTML tags. Please check http://jsfiddle.net/Qkwm8/ for the demo.

I want the tooltip box to show properly regardless of the position of element, in this case <a>, that shows tooltips on mouseover event.

The tooltips are shown fine except when <a> floats right (or is at the end of the line) or at the bottom of the screen where it doesn't show properly, it appears off the screen

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

Thank you.

Update demo link

here's the complete result: http://jsfiddle.net/Qkwm8/3/

do you want to flip the tooltip to the left if there no window space on right hand side, — kobe
– kobe, Commented May 19, 2011 at 15:50

Vincent Ramdhanie · Accepted Answer · 2011-05-19 17:32:50Z

9

You can use the document width 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 are setting your tooltip to 200px wide. Something similar can be done with height.

There is also a window width but I always get confused about the difference so you should check which one gives you better results.

An example of the bottom of the page is:

   //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 since you are setting your tooltip to 200px height.

edited May 19, 2011 at 17:32

answered May 19, 2011 at 15:55

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vincent Ramdhanie Over a year ago

@Narazana You can do it in a similar manner to the way the left worked. Instead use the height() function. I'll edit the answer with an example.

Narazana Over a year ago

Thanks, Vicent. I finally did it. I just updated the question to include the latest update demo at jsfiddle.net/Qkwm8/3

user4082764 Over a year ago

@VincentRamdhanie Dear Vincent Ramdhanie can you check my question. STACKOVERFLOW

Ben · Accepted Answer · 2011-05-19 15:59:00Z

0

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

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

else -> the proper class the right .... }

answered May 19, 2011 at 15:59

Ben

2781 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

CSS dynamic position of tooltip on hover with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related