positioning jQuery tooltip

Question

I'm trying to customise the positioning of my tooltips, using jQuery UI Tooltip and this code:

$(".karma").tooltip({
  position: {
    my: "center bottom",
    at: "right top"
  }
});

But whatever I do to "my" and "at" nothing changes. What am I doing wrong?

Here is the link to the jQuery Tooltip API position section

Solution 1

There is nothing wrong with your code. However, without seeing your HTML, it is hard to say why it isn't working.

Make sure you have loaded jQueryUI script: here. Also make to wrap your code with $(document).ready(). Let me know if you have any other questions.

DEMO: http://jsfiddle.net/dirtyd77/SLGdE/16/

Solution 2

If you got here because your positioning addition wasn't working (e.g. at: "right + 10"), then the solution is to remove any spaces around the operator.

Change at: "right + 10" to at: "right+10", and it should work.

Comments

[Jeff Pole]

Well, I'm using rails and the assets pipeline is enabled, and I have these lines in my application.js. //= require jquery //= require jquery_ujs //= require jquery-ui. And it is wrapped inside document ready

[Jeff Pole]

The relevant part of my html code looks like this: <p class="karma" data-original-title="tooltip test">Karma score</p>

[Maximillian Laumeister]

Thanks for posting an answer to this question! This answer is very short though and doesn't provide much context. Please explain some of the reasoning behind it, and it will become much more useful for the asker and future readers. Thanks!