jQuery UI 工具提示 - 如何正确地垂直居中定位到鼠标？

Question

更新: 仍在寻找可行的解决方案，但请查看下面的答案，它可能会帮助您或给您一些想法。它适用于特定分辨率。

我正在使用jQuery UI工具提示插件，但我无法按照自己的意愿定位工具提示。

我希望它在垂直方向上与鼠标居中，但在所涉及的元素左侧。我相信我表达得很清楚，但我将向您展示一个图片以说明我的意思。

(这是它应该做的)
http://prntscr.com/v2yqi

正如您在我的示例中看到的那样，它在垂直方向上与元素本身居中，而不是与鼠标居中。

如果它可以随着鼠标移动（仅垂直跟踪），那就太完美了。不确定是否可以使用此插件实现此目的。我真的不理解他们的定位API。

这是一个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>";
        }
      }
    });
});

我非常感谢您对此提供的任何见解。提前致谢。

- Dustin Perolio

Answer 1

通过增加自定义类、跟踪和使用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;
}

这是更新后的 JSFiddle。

希望这对其他人有所帮助。

- Dustin Perolio

---

嗯...实际上还在接受更多的答案/想法...这个解决方案并不适用于所有分辨率，因为它是固定的，左侧距离取决于您的分辨率。 - Dustin Perolio

Answer 2

你可以使用track: true，但我认为jQuery提示不太用户友好和灵活 =（ 你试过qTip2吗？ http://jsfiddle.net/5XWaB/2/

- Steely Wing

---

是的，仅仅添加track：true并不能像我想要的那样起作用。它相当容易出现故障，并会分散用户阅读文本的注意力。既然我已经在使用UI插件进行其他操作，我真的很想通过jQuery UI工具提示来实现这一点。 - Dustin Perolio

你可以尝试一起使用qTip2和jQuery UI =) - Steely Wing