Jquery title attribute not available after using it for a tooltip

Question

I have a button that is used to update a note. If the user hovers over the button, they will see the text of the note, which is stored in the title. If they click on the button, I want to open a form where the user can update the note.

The problem is, once the button title is used for a tool tip, I can no longer access the title attribute in order to send it to the form.

Below is a simplified version. When the user clicks on the button, the div with id="output" should change to 'button title is "my button"'. What is says is 'button title is ""'.

<script>
    $(document).tooltip();

    $(".button-class").click(function() {
        var t = $(this).attr("title");
        $("#output").html('button title is "' + t +'"');
    });    
</script>

<button class="button-class" title="my button">click me</button>
<div id="output"></div>

The jsfiddle is here : http://jsfiddle.net/f844a63f/

If I don't call $(document).tooltip(), it works fine.

Any ideas? I'm using the latest jquery.

Answer 1

try this :-

$(".button-class").click(function() {
   var t = $(this).attr("aria-describedby");    
   var text=$('#'+t).text();
   $("#output").html('button title is "' + text +'"');
});    

Demo