0

誰かがここで何が起こっているか知っていますか？

1 つだけが表示されるはずの 2 つのツールチップを表示する 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

その理由は、2番目の入力にもid属性があるため、tootltipidオプションと一致するためです。

ツールチップは、ツールチップアイテムが別のツールチップアイテム内にネストされているかどうかをチェックしないようです。これは理にかなっていると思います。たとえば、ツールチップを必要とする非常に大きな領域がある場合、その中にツールチップも必要な小さなアイテムがたくさんあります。

idから除外しないようにitemsオプションを変更することをお勧めします。

于 2012-09-18T20:34:59.040 に答える