• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 279
  • Last Modified:

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.

  • 2
2 Solutions
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):

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 {

      /* CSS3 standard */
      border:1px solid black;
    display:none; /*--Hides by default--*/
      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() {
            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 });
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.

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!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now