jquery tools: tooltip and tabs not playing together

Question

im using jquery tools. im trying to put tooltips on the inputs of the form which is in the a tab. this is my script:

<script>
// perform JavaScript after the document is scriptable. 
$(function() {
// initialize tooltips 
$("#UserContactPerson").tooltip({ 

    // place tooltip on the right edge 
    position: "center right", 

    // a little tweaking of the position 
    offset: [-140, -15], 

    // use the build-in fadeIn/fadeOut effect 
    effect: "fade", 

    // custom opacity setting 
    opacity: 0.7, 

    // use this single tooltip element 
    tip: '.tooltip'});
});

$(function() { 
    // setup ul.tabs to work as tabs for each div directly under div.panes 
    $("ul.tabs").tabs("div.a"); 
});
</script>

this is the php in cakephp

<div class="a">
    <?php 

echo $form->create('User', array('action' => 'recover'));
echo $form->input('contact_person', 
                  array('title' => 'who is responsible for the account'));
echo "<label></label>".$form->submit('Submit', array('name'=>'Submit'));
echo $form->end();

    ?>        

</div>

the code works for different form which is not in the tab.

thank you for your tips.

Answer 1

Knowing nothing about the two plugins I'd hazard a guess that you want to swap the order you apply them. Tab it first, then set the tooltips and see if that's any better.

Also you don't need two $(document) functions, just stick both in one like so:

<script>
  // perform JavaScript after the document is scriptable. 
  $(function() {      
    // setup ul.tabs to work as tabs for each div directly under div.panes 
    $("ul.tabs").tabs("div.a"); 

    // initialize tooltips 
    $("#UserContactPerson").tooltip({ 

      // place tooltip on the right edge 
      position: "center right", 

      // a little tweaking of the position 
      offset: [-140, -15], 

      // use the build-in fadeIn/fadeOut effect 
      effect: "fade", 

      // custom opacity setting 
      opacity: 0.7, 

      // use this single tooltip element 
      tip: '.tooltip'
    });    
  });
</script>