0

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

jsbin 显示两个工具提示，其中应该只有一个

代码：

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

1 回答 1

1

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

似乎工具提示不会检查工具提示项是否嵌套在另一个工具提示项内。我认为这确实有道理。例如，如果您有一个非常大的区域需要工具提示，那么里面的一堆较小的项目也需要工具提示。

我建议更改 items 选项以不过滤掉 id。

于 2012-09-18T20:34:59.040 回答