如何使用Materializecss在同一個div上顯示兩個工具提示？

Question

大家好，我有一個表單Materialized，並且我使用可折疊組件來顯示它。 對於每個類別，我需要在手風琴（每個seccion的標題）中顯示兩個工具提示，第一個顯示類別的名稱，第二個顯示從表單中選擇的選項的文本“ Active”。

我有下一個代碼：

 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> 

我只想有兩個工具提示元素，一個在用戶將鼠標穿過手風琴（標題）時出現在手風琴的任何部分，第二個需要在用戶將鼠標置於選項“和/或放在手風琴中（標題）。 關於如何做到這一點的任何想法？ 現在，我只有一個工具提示，但我需要兩個。 如何添加第二個？

Answer 1

您只需將class "tooltipped"和data-tooltip="Message"到collapsible-header 。

它能做什么？

基本上，它將collapsible-header視為另一個需要提示的容器，您可以在data-tooltip添加所需的消息。

 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>