asked on

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?

SOLUTION

kaufmed

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

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>

ASKER CERTIFIED SOLUTION

Dave Baldwin