Browser tooltip reappears after click event

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/vader/jquery-ui.css">
<div>
    <p>Click on the button, wait for the tooltip to disappear, slightly move your mouse where it is still over the button.  Should the jQuery UI Tooltip reappear instead of the browser tooltip?</p><br>
</div>
<div>HAHAHAHA
    <button id="First" title="Hello!"></button>
    <br><br>
    
</div>
        
<div>
    <input id="Second"></input>                    
</div>

JavaScript

$('#First').button({
    icons: {
        primary: "ui-icon-locked"
    },
    text: false
}).tooltip();

$('#First').click(function() {
    $('.ui-tooltip').focus();
});