Tooltip issue

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<div id="parent" title="parent tooltip" style="width: 500px">
    PARENT!
    <div id="child" title="child tooltip" style="width: 100px">
        CHILD!
    </div>
</div>

JavaScript

$(document).ready(function () {
$('div').tooltip();
});