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

Question

你好伙计我有一个表格en Materialize我使用可折叠组件来显示它。对于每个类别，我需要在手风琴（每个章节的标题）中显示两个工具提示，第一个显示类别的名称，第二个显示从表单中选择的选项的文本“活动”。

我有下一个代码：

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>