0

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>
Charles
  • 50,943
  • 13
  • 104
  • 142
Toskan
  • 13,911
  • 14
  • 95
  • 185

1 Answers1

1

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.

Nal
  • 2,741
  • 20
  • 14
  • thank you. The best solution for me is to use the $("#targetID") as items trigger. E.g. hand in the element that triggered the tooltip and reference its variable in items - items: $("theItemWhichICached") – Toskan Sep 20 '12 at 15:00