어떻게 Materializecss를 사용하여 동일한 div에 두 개의 툴팁을 표시 할 수 있습니까?

Question

안녕 얘들 아 나는 Materialize라는 형식을 가지고 있으며 접을 수있는 구성 요소를 사용하여 표시합니다. 각 카테고리별로 아코디언 (각 seccion 헤더)에 두 개의 툴팁을 표시해야합니다. 첫 번째는 카테고리의 이름을 표시하고 두 번째는 양식에서 선택된 옵션의 텍스트 "활성"을 표시합니다.

나는 다음 코드를 :

function obtain() { 
 
    var selectCloud_and_or = $("#And_OrCloud").find("option:selected").text(); 
 
    $("#cloud_AndOr").text(selectCloud_and_or); 
 
} 
 
$('select').change(obtain); 
 
obtain();

.collapsible { 
 
    margin-left: 80px; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/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.98.0/js/materialize.min.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('.collapsible').collapsible(); 
 
    }); 
 
</script> 
 

 
<!-- select option --> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('select').material_select(); 
 
    }); 
 
    $('select').material_select('destroy'); 
 
</script> 
 

 
<!-- Tooltip --> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('.tooltipped').tooltip({ 
 
     delay: 50 
 
    }); 
 
    }); 
 
</script> 
 

 
<ul class="collapsible" data-collapsible="accordion"> 
 
    <li> 
 
    <a class=" tooltipped" data-position="left" data-delay="50" data-tooltip="First"> 
 
     <div class="collapsible-header"><i class="wi wi-cloudy"></i></i><span id="cloud_AndOr"></span><span class="clouds"></span></a> 
 
    </div> 
 
    <div class="collapsible-body"> 
 

 
     <div class="row"> 
 
     <div class="col s12 offset-s4"> 
 
      <select class="and-or" id="And_OrCloud" name="a_o[]"> 
 
       <option value="4" selected="selected">And</option> 
 
       <option value="5">Or</option> 
 
       </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li>

사용자가 어떤 부분에 마우스 축복하는 아코디언 (헤더)를 넣을 때 난 그냥 두 툴팁 요소를 갖고 싶어

이 하나가 나타납니다 사용자가 아코디언 (헤더)에있는 "and/or"옵션에 마우스를 올렸을 때 두 번째 아이콘이 표시되어야합니다. 어떻게 할 생각인가? 지금은 단 하나의 툴팁 만 있지만 두 개가 필요합니다. 어떻게 두 번째를 추가 할 수 있습니까?

Answer 1

collapsible-header에 "tooltipped" 및 data-tooltip="Message" 클래스를 추가하기 만하면됩니다.

무엇이 있나요?

그것은 기본적으로 취급를 A 필요가 또 다른 컨테이너 tooltiped 될하고 data-tooltip에서 원하는 메시지를 추가 할 수 있습니다 같은 collapsible-header.

function obtain() { 
 
    var selectCloud_and_or = $("#And_OrCloud").find("option:selected").text(); 
 
    $("#cloud_AndOr").text(selectCloud_and_or); 
 
} 
 
$('select').change(obtain); 
 
obtain();

.collapsible { 
 
    margin-left: 80px; 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/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.98.0/js/materialize.min.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('.collapsible').collapsible(); 
 
    }); 
 
</script> 
 

 
<!-- select option --> 
 

 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('select').material_select(); 
 
    }); 
 
    $('select').material_select('destroy'); 
 
</script> 
 

 
<!-- Tooltip --> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('.tooltipped').tooltip({ 
 
     delay: 50 
 
    }); 
 
    }); 
 
</script> 
 

 
<ul class="collapsible" data-collapsible="accordion" > 
 
    <li> 
 
    <a class=" tooltipped" data-position="left" data-delay="50" data-tooltip="First"> 
 
     <div class="collapsible-header tooltipped" data-tooltip="Another tooltip"><i class="wi wi-cloudy"></i></i><span id="cloud_AndOr"></span><span class="clouds"></span></a> 
 
    </div> 
 
    <div class="collapsible-body"> 
 

 
     <div class="row"> 
 
     <div class="col s12 offset-s4"> 
 
      <select class="and-or" id="And_OrCloud" name="a_o[]"> 
 
       <option value="4" selected="selected">And</option> 
 
       <option value="5">Or</option> 
 
       </select> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li>