Why does this tooltip not work properly?

Head out to http://www.stationhillsaysthanks.com

When you hover over the flag, there should be a tooltip displayed similar to what you see at http://www.rssbenefits.com when you hover over the blue "DUNS" graphic, at least it's the same code.

When you're looking at stationhillsaysthanks.com and hover over the flag, there's no tooltip, but a scroll bar appears at the bottom so something's happening, but I don't know what.

Thoughts?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

käµfm³d 👽Commented:
Well, it appears it does work, but your positioning is incorrect. If you take a look at the scrollbars of the browser while you mouse over the flag, you will see that they shift while you move the mouse. You can see that the tooltip is off on the lower right if you scroll your screen (using the arrow keys):

Screenshot
0
brucegustPHP DeveloperAuthor Commented:
Well, there you go.

Next question: I'm playing with my spreadsheet and some other values and I'm not accomplishing anything. Any ideas as to what I need to adjust in order to get this thing to show up properly?

Here's the "tip" on my stylesheet:

.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;
}

..and here's the code on my header:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      //Tooltips
      $(".tip_trigger").hover(function(){
            tip = $(this).find('.tip');
            tip.show(); //Show tooltip
      }, function() {
            tip.hide(); //Hide tooltip              
      }).mousemove(function(e) {
            var mousex = e.pageX + 20; //Get X coodrinates
            var mousey = e.pageY + 20; //Get Y coordinates
            var tipWidth = tip.width(); //Find width of tooltip
            var tipHeight = tip.height(); //Find height of tooltip
            
            //Distance of element from the right edge of viewport
            var tipVisX = $(window).width() - (mousex + tipWidth);
            //Distance of element from the bottom of viewport
            var tipVisY = $(window).height() - (mousey + tipHeight);
             
            if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
                  mousex = e.pageX - tipWidth - 20;
            } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
                  mousey = e.pageY - tipHeight - 20;
            }
            tip.css({  top: mousey, left: mousex });
      });
});
</script>
0
Dave BaldwinFixer of ProblemsCommented:
Looks to me like you have 3 copies of jQuery which can't help any.  And your page and the page you copied from are plagued with errors.  That <map> does not belong in the <head> section.  You other <map> has errors on every line because of an extra comma after the 'coords'.

And you're trying to use HTML5 which is not the same as HTML 4.01 that is used in the other page.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.stationhillsaysthanks.com%2F
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brucegustPHP DeveloperAuthor Commented:
Hey, guys!

After cleaning things up, it dawned on me that the fatal flaw was that I had that tooltip functionality happening within a div. That, apparently is a deal breaker, so I went with a different approach and I was able to make the client happy. Thanks for your feedback!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.