Jquery UI 1.9 tooltip showing twice in tables with radio buttons?

someone knows what's going on here?

jsbin showing two tooltips where only one should be

code:

<!DOCTYPE html>
<html>
<head>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />


<meta charset="utf-8">
<title>jQuery UI Autocomplete - Combobox</title>
<script src="https://raw.github.com/jquery/jquery-ui/8fcbe502ee548fe8c10cf64d7053c70837fdcca3/jquery-1.7.2.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.core.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.widget.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.button.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/0a1cd9501c01b92a7f007cea1040f50ef4997400/ui/jquery.ui.position.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.menu.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.autocomplete.js"></script>
<script src="https://raw.github.com/jquery/jquery-ui/interactions/ui/jquery.ui.tooltip.js"></script>

<meta charset=utf-8 />
<title>JS Bin</title>

  </head>  

  <body>
    <style>
      /*!
 * jQuery UI Tooltip @VERSION
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 */
.ui-tooltip {
    padding:8px;
    position:absolute;
    z-index:9999;
    -o-box-shadow: 0 0 5px #aaa;
    -moz-box-shadow: 0 0 5px #aaa;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}
/* Fades and background-images don't work well together in IE6, drop the image */
* html .ui-tooltip {
    background-image: none;
}
body .ui-tooltip { border-width:2px; }

    </style>
       Please mouseover the blue area, then from there over a radio.

    <table id="targetID" style="background-color: lightblue;">
    <tbody><tr>
<td>
<input type="radio"  name="targetID" checked="checked"><label for="targetID:0"> 3a</label></td>
<td>
<input type="radio" value="2" id="targetID:1" name="targetID"><label for="targetID:1"> 3b</label></td>
    </tr>
</tbody></table>


  <script language="javascript" type="text/javascript">     


    $(document).ready(function(){
      $("#targetID").tooltip({content : function(){return "Sad tooltip should only appear once :.-(";}, items: "[id]"});
    });
  </script> 


  </body>

  </html>

Solution

The reason is because the second input also has an id attribute so it matches your tootltip id option.

It appears that tooltip does not check if a tooltip item is nested inside of another tooltip item. This does make sense I think. For example if you had a really big area that needs a tooltip then a bunch of smaller items inside that also need tooltips.

I recommend changing the items option to not filter off of id.