JQueryUI Tooltip settings ignored

Question

I can't get JQueryUI to pay any attention to the tooltip settings I am trying to apply

var li = jQuery('<li title="test">test</li>');
jQuery(myUl).append(li);

jQuery(li).tooltip({
    track: true,
    position: {
        my: "left top",
        at: "bottom",
        using: function (position, feedback) {
            $( this ).css( position );
            $("<div>").addClass("arrow")
        }
    },
    content: function () {
        return $(this).attr('title');
    }
});

I know that the tooltip() function is being called because I can comment it out and the display reverts back to the standard tooltip, but nothing in the parameters makes any difference to the display. My first priority is to get the content to appear on multiple lines, for that I have added <br /> tags at the right places. But so far they always get displayed to the user.

Help!

Answer 1

remove the line:

var li = jQuery('<li title="test">test</li>');

add <li> element directly to jQuery:

jQuery('li').tooltip({
   track: true,
   position: {
    my: "left top",
    at: "bottom",
    using: function (position, feedback) {
        $( this ).css( position );
        $("<div>").addClass("arrow")
    }
  },
  content: function () {
    return $(this).attr('title');
  }
});

Answer 2

It appears to be a user error. I had no idea that Bootstrap also provided a Tooltip function and it is taking priority here. Once I started using Bootstrap Tooltip options they were used just fine