jQuery UI Tooltips - How to correctly position vertically centered to the mouse?

Question

Update: Still looking for a viable solution, but check my answer below, it may help you or give you an idea. It works for a specific resolution.

I'm using the jQuery UI tooltips plugin but I m having trouble positioning the tooltip how I want.

I would like it to be centered at the mouse vertically, but just to the left of the element in question. I believe I'm wording that correctly, but I'll show you a picture of what I mean.

(this is what it should be doing)
http://prntscr.com/v2yqi

As you can see in my example, it's centering vertically to the element itself, not the mouse.

If it could move with the mouse (vertically tracking only) that would be perfect. Not sure if this is possible with this plugin. I don't really understand their positioning API.

And here's a JSFiddle.

  $(function() {
    $( document ).tooltip({
      items: ".entry",
      position: { my: "center", at: "left" },
      content: function() {
        var element = $( this );
        if ( ( element.is( ".entry" ) ) ) {
          return "<div class='hi'>This is a very nice entry! It's so pretty and I feel     like I can touch it. This is just random filler text to give you the idea..</div>";
        }
      }
    });
});

I really appreciate any insight you can give me on this. Thanks in advance.

Answer 1

Ended up getting it working by adding a custom class, tracking, and position: fixed:

Javascript:

$(function () {
      $(document).tooltip({
          items: ".entry",
          position: {
              my: "right bottom+50"
          },
          tooltipClass: "entry-tooltip-positioner",
          track: true,
          content: function () {
              var element = $(this);
              if ((element.is(".entry"))) {
                  return "<div class='hi'>This is a very nice entry! It's    so pretty and I feel like I can touch it. This is just random filler text.</div>";
              }
          }
      });
  });

CSS:

.entry {
    position: relative;
    right: -200px;
    width: 500px;
}
.entry-tooltip-positioner {
    position: fixed !important;
    left: -130px !important;
}

And the updated JSFiddle

Hopefully this helps someone else out sometime.

Answer 2

You can use track: true, but I think jQuery tooltip is not very user-friendly and flexible =( Have you tried qTip2 ?

http://jsfiddle.net/5XWaB/2/