javascript - How to avoid jquery ui tooltip to occur in child div? -
i tying include tooltip in parent div not in child div.
here jquery ui tooltip:
$(function () { $("#parent_div").tooltip(); });
here html:
<div id="parent_div" title="hello tooltip"> parent div contents <div id="child_div" onmouseover="show_list();" onmouseout="hide_list();" title=""> child div contents </div> parent div contents </div>
title=""
(giving blank title property) in child_div creating problem. after hover on child_div disables tooltip parent_div also.
you can see , test problem here.
please give me solution keeping in view onmouseover , onmouseout events should not disable because using them in child_div other purpose.
thank in advance.
you try disable tooltip
when mouseover
child, enable when mouseleave
child.
$("#child_div").mouseover(function(){ $("#parent_div").tooltip('disable'); }) $("#child_div").mouseleave(function(){ $("#parent_div").tooltip('enable'); })
$(function () { $("#parent_div").tooltip(); $("#child_div").mouseover(function(){ $("#parent_div").tooltip('disable'); }) $("#child_div").mouseleave(function(){ $("#parent_div").tooltip('enable'); }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> <link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"> <div id="parent_div" title="hello tooltip"> parent div contents <div id="child_div" title=""> child div contents </div> parent div contents </div>
Comments
Post a Comment