我如何使用posticalizecs在同一div上显示两个工具提示

Question

大家好，我有一个表格en a positize，我使用可折叠组件来显示它。对于每个类别，我需要在手风琴（每个秘密的标题）中显示两个工具提示，第一个显示该类别名称的名称，第二个显示了从表单中选择的选项的文本" active"。p>我有下一个代码：

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

您需要将类"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>