jQuery UI工具提示 - 如何正確定位垂直居中鼠標？

更新：仍在尋找一個可行的解決方案，但請查看下面的答案，它可能會幫助你或給你一個想法。它適用於特定的分辨率。jQuery UI工具提示 - 如何正確定位垂直居中鼠標？

我正在使用jQuery UI tooltips plugin，但我 m無法定位我想要的工具提示。

我希望它在鼠標垂直居中，但只是在問題的元素的左側。我相信我的話是正確的，但我會告訴你我的意思。

正如你可以看到在我的例子，它的垂直居中元素本身，而不是鼠標。

如果它可以隨鼠標移動（僅限垂直跟蹤），那將是完美的。不知道這個插件是否可能。我真的不明白他們的positioning 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>"; 
     } 
     } 
    }); 
});

我真的很感謝你能給我的任何見解。提前致謝。

來源

2013-03-05 Dustin Perolio

最終得到它的工作，跟蹤，和位置是：固定：

使用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-05 07:29:17

嗯......實際上仍然接受更多的答案/想法......這個解決方案不適用於所有分辨率，因爲它是固定的，左邊的距離取決於你的分辨率。 – 2013-03-05 13:18:31

您可以使用track: true，但我認爲jQuery的提示是不是很人性化的，靈活=（你有沒有通過添加自定義類試圖qTip2？

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

來源

2013-03-05 06:18:14

是的，只需添加track：true不會按我的意願工作。這很不好，會分散用戶試圖閱讀文本。我真的很想用jQuery UI工具提示來實現這一點，因爲我已經在使用UI插件來處理其他事情了。 – 2013-03-05 06:32:52

你可以嘗試一起使用qTip2和jQuery UI =） – 2013-03-05 06:37:17

jQuery UI工具提示 - 如何正確定位垂直居中鼠標？

回答

相關問題