ul에 클래스가 비활성화되어있을 때 어떻게 툴팁 요소를 제거 할 수 있습니까?

Question

질문이 있습니다. ul에서 마우스를 가져 가면 툴팁 요소를 어떻게 제거 할 수 있습니까? 나는이 html 코드가 있습니다

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
<div class="col s12 offset-s4"> 
 

 
<script type="text/javascript"> 
 

 
    $(document).ready (function() { 
 
     $('select').material_select(); 
 
     $('select').material_select('destroy'); 
 
     $('.tooltipped').tooltip({delay: 50}); 
 
    }); 
 
</script> 
 
<a id="tool-new" class="tooltipped" data-tooltip="Please select more than one category" data-position="right" data-delay="120"> 
 
    <select class="and-or" id="And_Or" name="a_o[]"> 
 
     <option value="4" selected="selected">And</option> 
 
     <option value="5">Or</option> 
 
    </select> 
 
</a> 
 
      
 

 

가 난 그냥 선택 박스를 사용할 때 도구 설명을 가져하고자합니다. 그러나 선택 상자가 비활성화되어 작동하지 않는 경우 요소를 제거하여 툴팁이 불규칙 해지도록하십시오. 너 나 좀 도와 줄래 ?? 나는 materializecss, 정말 좋은 프레임 워크와 함께 일하고 있어요.

Answer 1

mouseover에 jQuery를 쓰고 있습니다. ul입니다. 마우스 UL에 간다 때마다 툴팁 코드

$(document).ready (function() { 
 
    $('select').material_select(); 
 
    $('.tooltipped').tooltip({delay: 50}); 
 
}); 
 
$('select').material_select('destroy'); 
 
$('body').on("mouseover",'.dropdown-content', function(){ 
 
    $("#tool-new").tooltip("hide"); 
 
})

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> 
 
<div class="col s12 offset-s4"> 
 
    <a id="tool-new" class="tooltipped" data-tooltip="Please select more than one category" data-position="right" data-delay="120"> 
 
     <select class="and-or" id="And_Or" name="a_o[]"> 
 
      <option value="4" selected="selected">And</option> 
 
      <option value="5">Or</option> 
 
     </select> 
 
    </a>

Answer 2

자바에서는 document.getElementById('And_Or').disabled을 사용하여 드롭 다운 목록이 사용 중지되었는지 여부를 확인할 수 있습니다. 그렇다면 document.getElementById('tool-new').className += ' disabled-tooltip'과 함께 툴팁 요소에 클래스를 적용하십시오. 그런 다음 CSS를 사용하여 disabled-tooltip 클래스의 스타일을 지정하고 display: none과 같이 요소를 숨길 수 있습니다.