Hello there,

This is my markup:

<table class="col1table" cellspacing="0" cellpadding="0">
   <tr>
      <td><a class="tips_trigger" href="#"><img src="/img/design/icon_tips_venn.png" /></a></td>
      <td><a class="facebook_trigger" href="#"><img src="/img/design/icon_facebook.png" /></a></td>
      <td><a class="twitter_trigger" href="#"><img src="/img/design/icon_twitter.png" /></a></td>
      <td><a class="myspace_trigger" href="#"><img src="/img/design/icon_myspace.png" /></a></td>
   </tr>
   <tr>
      <td><a class="tips_trigger" href="#">TIPS EN VENN</a></td>
      <td><a class="facebook_trigger" href="#">FACEBOOK</a></td>
      <td><a class="twitter_trigger" href="#">TWITTER</a></td>
      <td><a class="myspace_trigger" href="#">MYSPACE</a></td>
   </tr>
</table>

This is the mark-up for a tool-tip:

<div id="message_tips" class="toolTip">Lorem ipsum dolor sit amet.<br /><br /><br /><br /><br /><br />Lorem ipsum dolor sit amet.</div>

This is my code to hide/unhide tooltip for .tips_trigger (the tooltip has id: "#message_tips"). Notice that there is one .tips_trigger on each row in the table. And there will be one tooltip per "..._trigger-class".

$('.tips_trigger').toggle(function(event){
  event.preventDefault();
    $('#message_tips').css('display', 'block');
  }, function(event){
    $('#message_tips').css('display', 'none');
});

I have two problems:
1. Each of the tips_trigger-classes seems to work the script independatly. What I mean by that is if I click tips_trigger in the first row, it displays the tool-tip. If i click tips_trigger in the second row straight after, it displays the tool-tip again. I have to click the exact same tips_trigger-class istance twice for it to hide it. How can I overcome this problem?
2. Each of the "..._trigger"-classes will have a tool-tip, not just ".tips_trigger". Is there a way to alter my current script so that it works for multiple unhides/hides instead of writing one script per class?

Kind regards,
Marius