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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With