jQuery UI Tooltip only shown once when tabbing through using keyboard

Question

I've created a tooltip using jquery ui, but when I navigate using keyboard, the tooltip content only appears once and never again.

Any ideas why this would happen?

$('.test').tooltip({
    tooltipClass: "tip-style",
    position: {
        my: "left center",
        at: "right center"
    },
    content: function() {
        return $('#tip-content').html();
    }
});

My working example: http://jsfiddle.net/WQpGE/

Answer 1

I think it is because the tooltip documentation says the content: method should be a callback or a string

Multiple types supported:

Function: A callback which can either return the content directly, 
          or call the first argument, passing in the content, e.g., 
          for Ajax content.

String: A string of HTML to use for the tooltip content.

I edited your code by creating a named function and referencing it in the content method. And it seems to work as expected.

http://jsfiddle.net/WQpGE/3/