Как я могу показать две подсказки в одном div с помощью Materializecss?

RolandF спросил: 27 ноября 2017 в 05:54 в: javascript

Привет, ребята. У меня есть форма en Materialise, и я использую складной компонент для ее отображения. Для каждой категории мне нужно отобразить в аккордеоне (заголовок каждой секции) две всплывающих подсказки: первая для отображения названия категории, а вторая для отображения текста "Активно" для опции, выбранной в форме.

У меня есть следующий код:

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>

Я просто хочу иметь два элемента всплывающей подсказки, один появляется, когда пользователь помещает мышь через аккордеон (заголовок), в любую часть аккордеона, а второй должен появляться, когда пользователь нажимает кнопку мыши на опции" и / или "что помещено в аккордеон (заголовок). Есть идеи, как это сделать? Прямо сейчас у меня есть только одна подсказка, но мне нужны две. Как я могу добавить второй?

0 ответов