Here is my query: How can I get rid of a tooltip element when hovering over a ul? Below is the HTML code snippet I'm working with:
<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>
I want the tooltip to disappear only when hovering over the selectbox if it's disabled. However, when the selectbox is enabled and functioning properly, I want the tooltip to remain visible. Can you please assist me with this issue? I am using materializecss for my design framework.