Question

I have created a fictitional order form that has tooltips powered by jQuery… When you hover over the labels for the soups you can choose, a tooltip displays itself and gives some information about the soup (I am pulling in data from the server from the php file – will give source at end of question). I am using a looping mechanism to offset the tooltip so that when you go down to the other soup’s labels and hover over them, they are offset everytime by a particular amount.

Now this is where the trouble is… You can hover each one once and it works fine, but if you go over them again the tooltips keep appearing lower and lower down the page until they disappear completely. I know it is something to do with my looping structure but I can’t figure out how to terminate it in this situation and set the offset increment back to the original value (so if you want to hover over them again the tooltip appears in same position as first time you hover over them).

I have just started learning jQuery in the last 2 weeks and have been looking at their library, it seems quite complex and for some reason I sometimes confuse it with standard Javascript and even Java and PHP, so I apologise if the problem ends up being trivial (to the experienced jQuery coder anyway).

I have uploaded the form to my host so you all can have a look at the form and see for yourself what happens, you can view the page at http://www.interkiwiwebdevelopers.com/code-examples/scarfiesoupshack/. When you get to the page, just hover over each of the soups names, and you will see the info as described earlier. As I said earlier, it seems to work fine upon hovering over each one for the first time, but after the second and each subsequent hover, they just keep appearing lower and lower on the page instead of returning to their original position. You are able to view the source code for all files except the “soupsInfo.php” file (this is used in the file “scarfiesoupshack.js”), which will be displayed below:

<?php

/*
* soupsInfo.php: this php script uses a switch-case statement to echo out a string
* describing the soup, of whose "soup_id" is in the GET query string eg:
*
* If you hover over the "Pumpkin Soup" label (whose soup_id would be "pumpkin"), 
* the text that would be echoed out (and displayed in the "hidden" div) would be
* "A delicious creamy pumpkin soup".
* 
* Refer to line 24 in "scarfiesoupshack.js" to see where the GET
* query string is being created.
*/


if (isset($_POST['soup_id'])){
// get soup_id value
$soup_id = $_POST['soup_id'];
switch($soup_id){
case "pumpkin":
echo ("<p style=\"margin-top:0px;\">A delicious creamy pumpkin soup</p>");
break;
case "chicken";
echo ("<p style=\"margin-top:0px; opacity:1.0;\">A flavoursome chicken soup</p>");
break;
case "clam":
echo ("<p style=\"margin-top:0px;\">Fresh clam soup from the ocean</p>");
break;
case "harira":
echo ("<p style=\"margin-top:0px;\">Whats harira?</p>");
break;
default:
echo ("<p style=\"margin-top:0px;\">What is this soup?</p>");
}
}
?>

Apologies for my explanation of the problem being so dense, I wasn’t sure how to explain it in a compact way…

Thanks in advance :).

Answer 1

You problem is this line:

$(".tooltip").css("top", "+=33")

This means take the current offset from the top and add 33 to it. Basically you are making an element appear at the top (relative to the parent) and on each hover shifting it down by 33. Instead you should the ‘top’ of the tooltop to the ‘top’ of the element being hovered over (plus some offset if you like).

To do this, after mouse over, retrieve the position of the element hovered over:

elem_top = $(this).position().top;

and then use that to position the tooltip.