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.

Backbencher

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.

Backbencher

Hmm... Still accepting more answers/ideas actually... This solution doesn't work with all resolutions since it's fixed and the left distance depends on your resolution. – Backbencher

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/

Riviera

Yeah, simply adding track: true doesn't function as I would like. It's rather glitchy, and would be distracting the user trying to read the text. I would really like to accomplish this with jQuery UI tooltip since I'm already using the UI plugin for other things. – Backbencher

You can try to use qTip2 and jQuery UI together =) – Riviera