Solved

Why is my tool tip loitering over in the corner?

Posted on 2014-09-20
6
107 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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

837 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