当ul禁用类时,如何删除工具提示元素?

时间:2017-12-23 03:02:03

标签: javascript jquery html css materialize

我有一个问题:当我将鼠标悬停在ul上时,如何删除工具提示元素? 我有这个HTML代码:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/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.100.2/js/materialize.min.js"></script>
<div class="col s12 offset-s4">

<script type="text/javascript">

  $(document).ready (function() {
      $('select').material_select();
      $('select').material_select('destroy');  
      $('.tooltipped').tooltip({delay: 50});
  });
</script>
<a id="tool-new" class="tooltipped" data-tooltip="Please select more than one category" data-position="right" data-delay="120">
   <select class="and-or" id="And_Or" name="a_o[]">
      <option value="4" selected="selected">And</option>
      <option value="5">Or</option>
   </select>
</a>
          

 
 

我只想在禁用选择框时将鼠标悬停在工具提示上。但是当selectbox没有被禁用并且工作正常时,请删除该元素以使工具提示无法解决。你可以帮帮我吗?我正在使用materializecss,这是一个非常好的设计框架。

1 个答案:

答案 0 :(得分:0)

我在 ul mouseover事件上编写了jQuery。只要鼠标继续 ul ,它就会隐藏工具提示检查代码

$(document).ready (function() {
    $('select').material_select();
    $('.tooltipped').tooltip({delay: 50});
});
$('select').material_select('destroy');
$('body').on("mouseover",'.dropdown-content', function(){
    $("#tool-new").tooltip("hide");
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/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.100.2/js/materialize.min.js"></script>
<div class="col s12 offset-s4">
    <a id="tool-new" class="tooltipped" data-tooltip="Please select more than one category" data-position="right" data-delay="120">
        <select class="and-or" id="And_Or" name="a_o[]">
            <option value="4" selected="selected">And</option>
            <option value="5">Or</option>
        </select>
    </a>