라디오 버튼이있는 테이블에서 Jquery UI 1.9 툴팁이 두 번 표시됩니까?

누군가 여기서 무슨 일이 벌어지고 있는지 알고 있습니까?라디오 버튼이있는 테이블에서 Jquery UI 1.9 툴팁이 두 번 표시됩니까?

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>

출처

2012-09-18 Toskan

그것은 당신의 tootltip 아이디 옵션을 일치하도록 두 번째 입력이 또한 id 속성을 가지고 있기 때문에 이유입니다.

툴팁은 툴팁 아이템이 다른 툴팁 아이템 안에 중첩되어 있는지 확인하지 않습니다. 내 말이 맞는 것 같아. 예를 들어 툴팁이 필요한 정말 큰 영역이있는 경우 내부에있는 작은 아이템도 툴팁이 필요합니다.

id를 필터링하지 않도록 items 옵션을 변경하는 것이 좋습니다.

출처

2012-09-18 20:34:59 Nal

감사합니다. 가장 좋은 해결책은 항목을 트리거 할 때 $ ("# targetID")를 사용하는 것입니다. 예 : 도구 설명을 트리거 한 요소를 가져 와서 items - items에 변수를 참조하십시오. $ ("theItemWhichICached") – Toskan

라디오 버튼이있는 테이블에서 Jquery UI 1.9 툴팁이 두 번 표시됩니까?

답변

관련 문제