jQuery UI 工具提示 - 如何正确定位垂直居中的鼠标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15215890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Tooltips - How to correctly position vertically centered to the mouse?
提问by Dustin Perolio
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 pluginbut I m having trouble positioning the tooltip how I want.
我正在使用jQuery UI 工具提示插件，但我无法按照我想要的方式定位工具提示。
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 shouldbe doing)
http://prntscr.com/v2yqi
（这是它应该做的）
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.
如果它可以随鼠标移动（仅垂直跟踪），那就完美了。不确定这个插件是否可以实现。我不太了解他们的定位 API。
And here's a JSFiddle.
这是一个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.
我真的很感激你能给我的任何见解。提前致谢。
回答by Dustin Perolio
Ended up getting it working by adding a custom class, tracking, and position: fixed:
最终通过添加自定义类、跟踪和位置使其工作：固定：
Javascript:
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:
CSS：
.entry {
position: relative;
right: -200px;
width: 500px;
}
.entry-tooltip-positioner {
position: fixed !important;
left: -130px !important;
}
And the updated JSFiddle
和更新的JSFiddle
Hopefully this helps someone else out sometime.
希望这可以帮助其他人。
