Question

有人知道这里发生了什么事吗？

jsbin showing two tooltips where only one should be

代码：

<!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>

Answer 1

原因是因为第二个输入也有一个id属性，所以它匹配你的tootltip id选项。

工具提示似乎不会检查工具提示项是否嵌套在另一个工具提示项内。我觉得这很有道理。例如，如果你有一个非常大的区域需要工具提示，那么内部的一些较小的项目也需要工具提示。

我建议您更改项目选项以不过滤ID。

Jquery UI 1.9工具提示在带有单选按钮的表中显示两次？

1 个答案: