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

Question

大家好，我有一个 en Materialize 表单，我使用可折叠组件来显示它。对于每个类别，我需要在 Accordion (每个部分的标题)中显示两个工具提示，第一个显示类别的名称，第二个显示从表单中选择的选项的文本“事件”。

我有下一个代码:

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>

我只想有两个工具提示元素，当用户将鼠标放在 Accordion (标题)的任何部分时，一个出现在 Accordion 的任何部分，第二个需要在用户将鼠标放在选项上时出现“和/或”放在 Accordion (标题)中。知道怎么做吗？现在我只有一个工具提示，但我需要两个。如何添加第二个？

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>