Change Title on hover

A way to change the title while also hovering.

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<div title="T1" style="border:1px solid; width:100px; background:#FFF" class="btn" data-btnNo="1">Button</div>

JavaScript

$( document ).tooltip();
$(".btn").click(function(){
    //alert($(this).data("ui-tooltip-title"));
    //alert($(this).attr("data-ui-tooltip-title"));
    alert($(this).attr("data-btnNo"));
    alert($(this).data("btnNo"));
    if ($(this).attr("title")=="T1"){
        $(this).attr("title","T2")
    }else{
        $(this).attr("title","T1")
    }
});