JQuery UI Tooltips - How to position vertically in the middle of the mouse?

Question

Update:. We are looking for a reliable solution, but please check my answer below, this may help you or give you an idea. It works for a specific permission.

I am using the jQuery UI tooltips plugin, but I am not able to position the tooltip as I want.

I would like it to be centered with the mouse vertically, but only to the left of the element in question. I believe that I am formulating correctly, but I will show you a picture of what I mean.

(this is what he should do)
http://prntscr.com/v2yqi

As you can see in my example, it is centered vertically on the element itself, not the mouse.

If it can be moved with the mouse (only for vertical tracking), this would be ideal. Not sure if this is possible with this plugin. I do not understand their positioning API .

And here is the 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 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 understanding you can give me. Thanks in advance.

Answer 1

When finished, 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 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 updated JSFiddle

Hope this one day helps someone else.

Answer 2

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

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