7

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

我正在使用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>";
        }
      }
    });
});

我真的很感激你能给我的任何见解。提前致谢。

4

2 回答 2

8

最终通过添加自定义类、跟踪和位置使其工作：已修复：

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

希望这可以帮助其他人。

于 2013-03-05T07:29:17.050 回答
2

你可以使用track: true，但我认为 jQuery 工具提示不是很人性化和灵活 =( 你试过qTip2吗？

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

于 2013-03-05T06:18:14.160 回答