jquery ui tooltip positioning doesn't work

Question

I am trying to show a tooltip right next to an element, but i can't get the positioning right. I can set the vertical positioning, but somehow horizontal positioning gets ignored. What's wrong with this piece of code?:

$(document).tooltip({ 
  content: 'tooltip', 
  items: '#plan', 
  position: { my: 'left top', at: 'left+150 top', of: '#plan' } 
});

Here is a JSFiddle: http://jsfiddle.net/BFWx2/2/

Answer 1

This is because you haven't included any UI css file in your fiddle.

you have included jQuery UI as an external resource and have included only the JS file and not the CSS file.

Check the jQuery UI checkbox instead of adding as external resource

or

Add the css reference to your fiddle.