asked on

Why is my tool tip loitering over in the corner?

Head out to http://hihatwebdesign.com/vbs/student_list_allergy.php. When you mouse over "allergies," I want the tooltip to be just to right and up a little bit. Right around 1:00. Instead, it's way over on the other side of the page and I don't know why.

What am I doing wrong?

Gary

Add position:relative to the allergies anchor.

Bruce Gust

ASKER

Are you talking about this code here, Gary?

.tip {

background-color:#ffffff;
      filter:alpha(opacity=95);
      /* CSS3 standard */
      /*opacity:0.6;*/
      border:1px solid black;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute;
      z-index:1000;
      text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

I changed "absolute" to "relative" and it seemed to make it worse. What am I missing?

Gary

Will get back to you in a short while, just checking through your code.

Gary

Try this for the positioning

    tip = $(this).find('.tip');
    var tipWidth = tip.width();
    var tipHeight = tip.height();
    var mousex = e.pageX;
    offset = $(this).offset();

    var mousey = offset.top - tipHeight - 30;
    if (mousex + tipWidth > $(window).width()) {
        mousex = $(window).width() - tipWidth - 25
    }
    tip.css({
        top: mousey,
        left: mousex
    });

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

Gary, I'm going to take your counsel and go with a different tool tip.

Thanks!