Solved

Why is my tool tip loitering over in the corner?

Posted on 2014-09-20
6
111 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
Industry Leaders: 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!

 
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Head to not include on scroll 4 36
html5 1 45
Drag & Drop Error 5 32
body or div size relative to background image 7 11
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 discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

738 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