Is there a way to include a tooltip only in the parent div and not in its child div?
I am currently using jQuery UI tooltip like this:
$(function () {
$("#parent_div").tooltip();
});
This is how the HTML looks:
<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>
The issue arises when I give a blank title property (title=""
) to the child_div. This disables the tooltip from the parent_div after hovering over the child_div.
You can see and test the problem HERE.
I need a solution where the onMouseOver and onMouseOut events are not disabled, as they serve another purpose in the child_div.
Thank you for your help.