Solved

Why is my tool tip loitering over in the corner?

Posted on 2014-09-20
6
114 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

626 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