Solved

Why is my tool tip loitering over in the corner?

Posted on 2014-09-20
6
104 Views
Last Modified: 2014-10-01
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?
0
Comment
Question by:brucegust
  • 4
  • 2
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40334807
Add position:relative to the allergies anchor.
0
 

Author Comment

by:brucegust
ID: 40334810
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?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40334811
Will get back to you in a short while, just checking through your code.
0
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 
LVL 58

Expert Comment

by:Gary
ID: 40334839
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

0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40334867
I haven't really tested the above, but since you are using jQuery why not use something like qTip - small footprint and does everything you need...

edit
Forget qTip - had in my mind it was a tiny plugin
0
 

Author Comment

by:brucegust
ID: 40354613
Gary, I'm going to take your counsel and go with a different tool tip.

Thanks!
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Logo Problem. 2 20
Change div area and length 1 26
Botom of page is wrong color 5 11
Box Locations 6 16
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question